:root {
    --bg: url("../img/backgrounds/bg-1.png");
    --panel: #181818ee;
    --line: #3f3a2c;
    --ink: #f6f4ef;
    --muted: #d1c49f;
    --label-text-color: #f5e9b4;
    --label-heading-color: #ffd23d;
    --label-muted-color: #d4c7a0;
    --accent: #ffd23d;
    --accent-soft: #33290a;
    --danger: #ff5e7a;
    --highlight: #ffe36b;
    --neon-pink: #ff5ccf;
    --neon-cyan: #42d9ff;
    --neon-violet: #ad6bff;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Avenir Next", "Hiragino Sans", "Yu Gothic", sans-serif;
    color: var(--ink);
    background: var(--bg);
    background-image: var(--bg);
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    text-shadow: none;
    position: relative;
    overflow-x: hidden;
}

body.modal-lock {
    overflow: hidden;
}

body.random-bg-enabled {
    background-image: var(--random-bg-image);
    background-size: cover;
    background-position: center;
}

body::before,
body::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0.56;
    background-repeat: no-repeat;
}

body::before {
    background-image:
        linear-gradient(120deg, transparent 0%, rgba(255, 210, 61, 0) 40%, rgba(255, 210, 61, 0.98) 50%, rgba(255, 210, 61, 0) 60%, transparent 100%),
        linear-gradient(120deg, transparent 0%, rgba(245, 190, 0, 0) 40%, rgba(245, 190, 0, 0.96) 50%, rgba(245, 190, 0, 0) 60%, transparent 100%),
        linear-gradient(120deg, transparent 0%, rgba(255, 229, 122, 0) 40%, rgba(255, 229, 122, 0.94) 50%, rgba(255, 229, 122, 0) 60%, transparent 100%);
    background-size: 300px 3px, 240px 3px, 260px 3px;
    background-position: 8% 14%, 48% 26%, 75% 10%;
    filter: drop-shadow(0 0 4px #ffd23d);
    animation: gold-shooting-stars-a 5.1s linear infinite;
}

body::after {
    background-image:
        linear-gradient(120deg, transparent 0%, rgba(255, 210, 61, 0) 40%, rgba(255, 210, 61, 0.98) 50%, rgba(255, 210, 61, 0) 60%, transparent 100%),
        linear-gradient(120deg, transparent 0%, rgba(245, 190, 0, 0) 40%, rgba(245, 190, 0, 0.96) 50%, rgba(245, 190, 0, 0) 60%, transparent 100%),
        linear-gradient(120deg, transparent 0%, rgba(255, 229, 122, 0) 40%, rgba(255, 229, 122, 0.94) 50%, rgba(255, 229, 122, 0) 60%, transparent 100%);
    background-size: 250px 3px, 280px 3px, 200px 3px;
    background-position: 24% 52%, 68% 42%, 90% 22%;
    filter: drop-shadow(0 0 5px #ffd23d);
    animation: gold-shooting-stars-b 6.3s linear infinite;
    animation-delay: -1.2s;
}

@keyframes gold-shooting-stars-a {
    0% {
        transform: translate3d(-22vw, -14vh, 0) rotate(-12deg);
        opacity: 0;
    }
    8% {
        opacity: 0.95;
    }
    62% {
        opacity: 0.35;
    }
    100% {
        transform: translate3d(30vw, 36vh, 0) rotate(-12deg);
        opacity: 0;
    }
}

@keyframes gold-shooting-stars-b {
    0% {
        transform: translate3d(-20vw, -12vh, 0) rotate(-14deg);
        opacity: 0;
    }
    12% {
        opacity: 0.9;
    }
    66% {
        opacity: 0.3;
    }
    100% {
        transform: translate3d(28vw, 34vh, 0) rotate(-14deg);
        opacity: 0;
    }
}

.page-hero,
.app-shell {
    position: relative;
    z-index: 2;
}

.page-hero {
    max-width: 1200px;
    margin: 28px auto 55px;
    padding: 0 16px;
    text-align: center;
}

.page-hero h1 {
    margin: 0;
    font-size: clamp(1.9rem, 4vw, 3.1rem);
    letter-spacing: 0.05em;
    color: #ffe59d;
    text-shadow: 0 1px 8px #000000aa, 0 0 16px #ffd23d88;
    animation: hero-neon-wave 2.8s ease-in-out infinite, hero-neon-flicker 4.2s linear infinite;
    transform-origin: center;
    position: relative;
    display: inline-block;
    overflow: hidden;
}

.page-hero h1::after {
    content: "";
    position: absolute;
    top: -18%;
    left: -40%;
    width: 26%;
    height: 140%;
    background: linear-gradient(110deg, transparent 0%, #ffffffd0 45%, #ffffff 52%, #b8efff 58%, transparent 100%);
    filter: blur(0.4px);
    transform: skewX(-18deg);
    animation: hero-neon-glint 2.2s ease-in-out infinite;
    pointer-events: none;
}

.hero-title-line {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}

.hero-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    max-width: 1168px;
    margin-left: auto;
    margin-right: auto;
    animation: none;
    overflow: visible;
}

.hero-brand-title {
    background: linear-gradient(90deg, #ffd959 0%, #f5c300 45%, #fff5d0 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent !important;
    text-shadow: none;
}

.hero-brand::after {
    display: none;
}

.hero-brand-sharp {
    display: inline-block;
    position: relative;
    padding: 10px 134px 12px;
    font-size: clamp(2rem, 6vw, 4.2rem);
    font-family: "Eurostile Extended", "Microgramma D Extended", "Bank Gothic", "Orbitron", "Arial Black", sans-serif;
    font-weight: 900;
    letter-spacing: 0.15em;
    line-height: 1;
    text-transform: none;
    color: #ffd23d;
    background: none;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: #ffd23d;
    clip-path: polygon(0 0, 76% 0, 86% 10%, 100% 10%, 91% 28%, 98% 40%, 90% 50%, 98% 60%, 91% 72%, 100% 90%, 86% 90%, 76% 100%, 0 100%, 9% 84%, 3% 64%, 10% 50%, 3% 36%, 9% 16%);
    transform: skewX(-24deg) scaleX(1.08);
    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.56),
        0 0 22px rgba(255, 210, 61, 0.48),
        2px 0 0 rgba(35, 24, 0, 0.7),
        -2px 0 0 rgba(35, 24, 0, 0.7);
    filter: saturate(1.4) contrast(1.2);
}

.hero-brand-sharp::after {
    content: "";
    position: absolute;
    top: -16%;
    left: -34%;
    width: 22%;
    height: 132%;
    background: linear-gradient(
        108deg,
        transparent 0%,
        rgba(255, 255, 255, 0.0) 34%,
        rgba(255, 255, 255, 0.92) 48%,
        rgba(255, 245, 189, 0.82) 56%,
        rgba(255, 255, 255, 0.0) 72%,
        transparent 100%
    );
    transform: skewX(-18deg);
    pointer-events: none;
    mix-blend-mode: screen;
    animation: hero-title-sparkle-run 2.2s ease-in-out infinite;
}

@keyframes hero-title-sparkle-run {
    0% {
        left: -34%;
        opacity: 0;
    }
    10% {
        opacity: 0.95;
    }
    58% {
        opacity: 0.92;
    }
    100% {
        left: 118%;
        opacity: 0;
    }
}

.hero-brand-logo {
    width: calc(clamp(132px, 18vw, 188px) + 1000px);
    height: auto;
    transform: scaleY(0.7);
    transform-origin: center;
    border-radius: 10px;
    border: 1px solid #5f4d18;
    box-shadow: 0 10px 24px #00000078, 0 0 0 2px #241b05;
}

.hero-round-badge {
    width: clamp(74px, 10vw, 118px);
    height: auto;
    border-radius: 50%;
    border: 1px solid #5f4d18;
    background: #0b0b0b;
    box-shadow: 0 8px 20px #00000066;
}

.hero-subcopy {
    margin: 40px 0 0;
    background: linear-gradient(90deg, #fff27a 0%, #ffe14a 52%, #ffd21f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-size: clamp(1.28rem, 2.7vw, 1.85rem);
    font-weight: 800;
    text-shadow: 0 1px 1px #00000099;
}

.hero-metrics {
    margin-top: 14px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    color: #ffe14a;
    font-weight: 600;
    text-shadow: 0 1px 1px #00000088;
}

.hero-metric {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(1.22rem, 2.4vw, 1.68rem);
    background: linear-gradient(90deg, #fff27a 0%, #ffe14a 56%, #ffd21f 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.hero-metric-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #ffd23d;
    box-shadow: 0 0 10px #ffd23d;
}

.hero-metric-trophy {
    color: #ffd54d;
    filter: drop-shadow(0 0 5px #ffe27f);
}

@keyframes hero-neon-wave {
    0% {
        transform: translate3d(0, 0, 0) scale(1) skewX(0deg) rotate(0deg);
        letter-spacing: 0.05em;
    }
    20% {
        transform: translate3d(-2px, -3px, 0) scale(1.01) skewX(-2deg) rotate(-0.3deg);
        letter-spacing: 0.065em;
    }
    40% {
        transform: translate3d(2px, 2px, 0) scale(0.998) skewX(1.8deg) rotate(0.22deg);
        letter-spacing: 0.052em;
    }
    60% {
        transform: translate3d(-1px, -2px, 0) scale(1.008) skewX(-1.6deg) rotate(-0.2deg);
        letter-spacing: 0.062em;
    }
    80% {
        transform: translate3d(1px, 1px, 0) scale(1.002) skewX(1deg) rotate(0.15deg);
        letter-spacing: 0.055em;
    }
    100% {
        transform: translate3d(0, 0, 0) scale(1) skewX(0deg) rotate(0deg);
        letter-spacing: 0.05em;
    }
}

@keyframes hero-neon-flicker {
    0%, 100% {
        text-shadow: 0 0 6px #d8f3ff, 0 0 14px #5dd6ff, 0 0 24px #8b7bff99;
        filter: brightness(1);
    }
    20% {
        text-shadow: 0 0 8px #e6f7ff, 0 0 18px #71e1ff, 0 0 30px #9f8bff;
        filter: brightness(1.06);
    }
    48% {
        text-shadow: 0 0 5px #cdeeff, 0 0 12px #48cfff, 0 0 20px #7f76ff88;
        filter: brightness(0.97);
    }
    72% {
        text-shadow: 0 0 9px #f0fbff, 0 0 20px #82e6ff, 0 0 34px #b299ff;
        filter: brightness(1.08);
    }
}

@keyframes hero-neon-glint {
    0% {
        left: -42%;
        opacity: 0;
    }
    18% {
        opacity: 0.95;
    }
    42% {
        left: 118%;
        opacity: 0;
    }
    100% {
        left: 118%;
        opacity: 0;
    }
}

.hero-nav {
    margin-top: 38px;
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 4px;
    border-radius: 999px;
    border: 1px solid #5f4d18;
    background: linear-gradient(180deg, #1e1e1e 0%, #101010 100%);
    box-shadow: inset 0 1px 0 #3a3a3a, 0 8px 20px #00000066;
    width: fit-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.hero-nav-row {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.hero-nav-row .hero-nav {
    margin-top: 0;
    margin-left: 0;
    margin-right: 0;
}

.auth-title-hero .hero-brand-logo {
    width: calc(clamp(132px, 18vw, 188px) + 280px);
}

@media (max-width: 640px) {
    .hero-brand-logo {
        width: min(92vw, calc(clamp(132px, 18vw, 188px) + 1000px));
    }

    .hero-subcopy {
        padding: 0 8px;
    }

    .hero-metrics {
        gap: 12px;
        flex-wrap: wrap;
    }

    .hero-metric {
        font-size: 0.95rem;
    }
}

.hero-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 132px;
    padding: 11px 22px;
    border-radius: 999px;
    text-decoration: none;
    background: transparent;
    border: 1px solid transparent;
    color: #f0d373;
    font-size: 1.06rem;
    font-weight: 800;
    box-shadow: none;
    transition: transform 0.18s ease, background-color 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

.hero-nav a .nav-badge {
    margin-left: 8px;
    min-width: 1.4em;
    height: 1.4em;
    padding: 0 0.38em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    color: #fff;
    background: #d92c2c;
    box-shadow: 0 0 0 2px #ffffff, 0 4px 10px #d92c2c66;
}

.hero-nav a:hover {
    background: #ffd23d26;
    border-color: #d2ad36;
    color: #fff0bb;
}

.hero-nav a.is-current {
    background: linear-gradient(180deg, #ffd23d 0%, #e8b300 100%);
    border-color: #ffea9a;
    color: #1a1404;
    box-shadow: inset 0 0 0 1px #fff4c9, 0 0 0 2px #8d6e1f;
}

.app-shell {
    max-width: 1200px;
    margin: 12px auto 24px;
    padding: 0 16px 24px;
    display: grid;
    gap: 20px;
    grid-template-columns: 1.2fr 1fr;
    align-items: stretch;
}

.ad-slot-section {
    max-width: 1200px;
    margin: 16px auto 24px;
    padding: 0 16px;
}

.ad-slot-placeholder {
    border: 1px dashed #9fb6e8;
    border-radius: 12px;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffffbf;
    color: #4b5f88;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.friends-shell {
    grid-template-columns: 1fr;
}

.friends-shell .schedule-pane {
    max-height: none;
    overflow-y: visible;
}

.profile-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 16px;
    align-items: start;
}

.profile-preview {
    background: #ffffff;
    border: 1px solid #d8e6ff;
    border-radius: 14px;
    padding: 12px;
}

.profile-showcase-card {
    background:
        radial-gradient(circle at 12% 14%, #dff5ff 0%, transparent 34%),
        radial-gradient(circle at 86% 18%, #ffe8ff 0%, transparent 32%),
        linear-gradient(145deg, #f7fcff 0%, #eef6ff 48%, #f9f2ff 100%);
    border: 1px solid #9fd7ff;
    box-shadow: inset 0 0 0 1px #d7f0ff, 0 10px 24px #84cfff5e;
}

.profile-info-card {
    border: 1px solid #ffc889;
    background:
        radial-gradient(circle at 90% 12%, #fff1dc 0%, transparent 32%),
        radial-gradient(circle at 16% 90%, #e8ecff 0%, transparent 36%),
        #fffdf8;
    box-shadow: inset 0 0 0 1px #ffe2bd, 0 10px 22px #ffbc7052;
}

.profile-badge-row {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.profile-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.73rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    border: 1px solid transparent;
    text-transform: uppercase;
}

.profile-chip-cyan {
    color: #0f4f7c;
    background: #dbf2ff;
    border-color: #9ed8ff;
}

.profile-chip-pink {
    color: #7f2d67;
    background: #ffe1f6;
    border-color: #ffb9ea;
}

.profile-chip-violet {
    color: #453087;
    background: #ece6ff;
    border-color: #cfc1ff;
    margin-right: 6px;
}

.profile-chip-orange {
    color: #8b4a14;
    background: #ffe9d3;
    border-color: #ffc98f;
    margin-right: 6px;
}

.top-page-badge-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 6px;
}

.top-search-shell .profile-chip-search {
    align-self: flex-start;
    justify-content: flex-start;
    width: fit-content;
    min-height: 0;
    padding: 1px 6px;
    font-size: 0.7rem;
    letter-spacing: 0.02em;
    margin-right: 0;
}

.profile-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 12px;
    border: 1px solid #c9daf8;
    background: #f4f8ff;
}

.profile-preview-name {
    margin: 12px 0 6px;
    font-weight: 700;
    color: #1f3570;
}

.profile-preview-bio {
    margin: 0;
    color: #4b5f88;
    white-space: pre-wrap;
}

.calendar-pane,
.schedule-pane {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: 0 14px 30px #5c79b833;
    padding: 16px;
    backdrop-filter: blur(10px);
}

.calendar-pane {
    position: sticky;
    top: 24px;
    align-self: stretch;
    z-index: 1;
    min-height: calc(100vh - 148px);
    display: flex;
    flex-direction: column;
}

.schedule-pane {
    position: relative;
    z-index: 2;
    max-height: none;
    overflow-y: visible;
}

.app-shell:not(.friends-shell) .top-search-shell {
    background:
        radial-gradient(circle at 10% 10%, #e5f6ff 0%, transparent 32%),
        radial-gradient(circle at 90% 20%, #efe7ff 0%, transparent 34%),
        #f9fcff;
    border-color: #96d7ff;
    box-shadow: inset 0 0 0 1px #d8f1ff, 0 10px 24px #8fd6ff4d;
}

.app-shell:not(.friends-shell) .calendar-pane {
    background:
        radial-gradient(circle at 12% 16%, #e3f3ff 0%, transparent 36%),
        radial-gradient(circle at 86% 20%, #ffe6f6 0%, transparent 35%),
        linear-gradient(150deg, #f8fcff 0%, #eef7ff 52%, #f8f0ff 100%);
    border: 1px solid #8acfff;
    box-shadow: inset 0 0 0 1px #d7eeff, 0 16px 34px #7ecbff52;
}

.app-shell:not(.friends-shell) .schedule-pane {
    background:
        radial-gradient(circle at 88% 12%, #ffeed6 0%, transparent 34%),
        radial-gradient(circle at 12% 84%, #e4f1ff 0%, transparent 34%),
        linear-gradient(150deg, #fffdf8 0%, #fff7ed 48%, #f3f7ff 100%);
    border: 1px solid #ffc58a;
    box-shadow: inset 0 0 0 1px #ffe5c6, 0 16px 34px #ffbd7052;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.calendar-header h1 {
    margin: 0;
    font-size: 1.45rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #1b2f72;
    text-shadow: 0 0 4px #bfeeff, 0 0 10px #58d8ff, 0 0 18px #ad6bff66;
}

.user-badge {
    margin: 4px 0 0;
    color: var(--muted);
    font-size: 0.86rem;
    text-shadow: 0 0 3px #d7e7ff;
}

.month-switch {
    display: flex;
    align-items: center;
    gap: 10px;
}

.month-switch h2 {
    margin: 0;
    min-width: 170px;
    text-align: center;
    font-size: 1.05rem;
    color: #2b4e93;
    text-shadow: 0 0 4px #cde3ff, 0 0 10px #42d9ff55;
}

.month-switch button,
#newScheduleButton,
.form-actions button {
    border: 0;
    border-radius: 10px;
    padding: 8px 12px;
    cursor: pointer;
    font-weight: 700;
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.month-switch button {
    background: var(--accent-soft);
    color: var(--accent);
    box-shadow: 0 0 10px #1fb5ff66, inset 0 0 10px #1fb5ff33;
}

.calendar-grid {
    flex: 1;
    align-content: stretch;
}

.calendar-grid .calendar-day {
    min-height: 0;
}

.calendar-grid .calendar-day:not(.outside) {
    height: 100%;
}

.calendar-grid,
.weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
}

.weekdays div {
    text-align: center;
    font-size: 0.85rem;
    color: var(--muted);
    padding: 6px 0;
    text-shadow: none;
}

.weekdays .weekday-sunday {
    color: #ff8fc2;
    font-weight: 700;
    text-shadow: 0 0 3px #ffd0e8;
}

.weekdays .weekday-saturday {
    color: #8ec6ff;
    font-weight: 700;
    text-shadow: 0 0 3px #d5efff;
}

.calendar-day {
    position: relative;
    min-height: 74px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: #ffffff;
    text-align: left;
    padding: 8px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    cursor: pointer;
    transition: 0.2s ease;
    box-shadow: inset 0 0 0 1px #dbe7ff, 0 0 10px #d6e5ff;
}

.calendar-day-pending-dot {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: #d92c2c;
    box-shadow: 0 0 0 2px #fff, 0 2px 6px #d92c2c88;
}

.day-owner-markers {
    margin-top: auto;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.day-owner-avatar {
    position: relative;
    border: 0;
    padding: 0;
    width: 22px;
    height: 22px;
    border-radius: 999px;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    box-shadow: 0 0 0 1px #d0e2ff;
}

.day-owner-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.day-owner-pending-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d92c2c;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px #d92c2c66;
    pointer-events: none;
}

.day-owner-more {
    font-size: 0.66rem;
    color: #5272a8;
    padding-left: 2px;
}

.calendar-day .day-number {
    font-size: 0.98rem;
    line-height: 1;
    text-shadow: none;
}

.calendar-day .holiday-name {
    font-size: 0.64rem;
    line-height: 1.2;
    letter-spacing: 0.01em;
    white-space: normal;
}

.calendar-day:hover {
    transform: translateY(-1px);
    background: #e8f4ff;
    border-color: #5fd9ff;
    box-shadow: inset 0 0 0 1px #42d9ff, 0 0 12px #42d9ff66;
}

.calendar-day.outside {
    opacity: 0.5;
}

.calendar-day.selected {
    border: 2px solid var(--accent);
    box-shadow: inset 0 0 0 1px #9deaff, 0 0 16px #42d9ff99;
}

.calendar-day.today {
    box-shadow: inset 0 0 0 2px var(--highlight);
}

.calendar-day.saturday {
    background: #edf5ff;
    border-color: #b9d8ff;
    color: #3f79ce;
}

.calendar-day.holiday {
    background: #fff0f6;
    border-color: #ffc5de;
    color: #d95796;
    font-weight: 700;
}

.schedule-pane header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.schedule-owner-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.schedule-owner-avatar {
    width: 20px;
    height: 20px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #c8d9f8;
    background: #f4f8ff;
}

.schedule-owner-pending-badge {
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d92c2c;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    border: 2px solid #fff;
    box-shadow: 0 2px 7px #d92c2c66;
}

#selectedDateLabel {
    color: #254b9b;
    text-shadow: 0 0 6px #42d9ff55;
}

.header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.header-actions form {
    margin: 0;
}

#newScheduleButton {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 14px #42d9ffaa;
}

.schedule-list {
    list-style: none;
    margin: 16px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: none;
    overflow-y: visible;
}

.friend-section {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    background: #f8fbff;
}

.top-search-shell {
    grid-column: 1 / -1;
    display: grid;
    gap: 10px;
    align-content: start;
}

.top-search-shell h3 {
    margin-bottom: 4px;
}

.top-search-shell .inline-form {
    gap: 10px;
    flex-wrap: wrap;
}

.top-search-shell .inline-form > * {
    margin: 0;
}

#topScheduleSearchStatus {
    margin-top: 4px;
}

.board-entry-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

.board-entry-card {
    display: block;
    border: 1px solid #b9d8ff;
    border-radius: 12px;
    padding: 14px;
    background: #ffffffd9;
    text-align: left;
    cursor: pointer;
    transition: transform 0.16s ease, box-shadow 0.16s ease, border-color 0.16s ease;
}

#openCreateThreadCard {
    background: #e8f6ff;
}

#openThreadListCard {
    background: #fff0df;
}

a.board-entry-card[href="/friends/search"] {
    background: #e9f5ff;
}

a.board-entry-card[href="/friends/list"] {
    background: #fff4e8;
}

a.board-entry-card[href="/friends/requests"] {
    background: #f0f9ec;
}

.board-entry-card:link,
.board-entry-card:visited {
    color: inherit;
    text-decoration: none;
}

.board-entry-card:hover {
    transform: translateY(-2px);
    border-color: #72c8ff;
    box-shadow: 0 8px 18px #8bcfff66;
}

.admin-nav-card.is-current {
    border-color: #5e8dff;
    box-shadow: 0 0 0 2px #5e8dff33, 0 10px 20px #5e8dff44;
    background: linear-gradient(180deg, #edf4ff 0%, #e4efff 100%);
}

.admin-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
}

.admin-item-card {
    border: 1px solid #5f7dff66;
    border-radius: 14px;
    background: linear-gradient(145deg, #ffffff 0%, #f2f7ff 100%);
    padding: 10px 12px;
    color: #1e2e58;
    box-shadow: 0 10px 18px #91b7ff33;
}

.admin-card-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.admin-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 999px;
    object-fit: cover;
    border: 1px solid #b9d8ff;
    background: #dce9ff;
    flex-shrink: 0;
}

.admin-card-avatar-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #21439a;
}

.admin-card-summary,
.admin-card-detail {
    display: grid;
    gap: 5px;
}

.admin-card-line {
    margin: 0;
    line-height: 1.45;
    color: #1f3570;
    word-break: break-word;
}

.admin-card-detail {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #ffffff40;
}

.admin-card-actions {
    margin-top: 10px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-nav-card .nav-badge {
    margin-left: 8px;
    min-width: 1.45em;
    height: 1.45em;
    padding: 0 0.35em;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #d92c2c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px #ffffff, 0 4px 10px #d92c2c66;
}

.board-entry-title {
    display: block;
    font-weight: 700;
    color: #21439a;
    margin-bottom: 4px;
}

.board-entry-text {
    display: block;
    color: #4b5f88;
    font-size: 0.92rem;
}

.board-game-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 10px;
}

.board-game-card {
    border: 1px solid #d1e2ff;
    border-radius: 10px;
    background: #fff;
    padding: 10px;
}

.board-game-card h4 {
    margin: 0 0 6px;
    color: #21439a;
}

.board-pending-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.3em;
    border-radius: 999px;
    background: #d92c2c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 800;
    line-height: 1;
    box-shadow: 0 0 0 2px #ffffff, 0 4px 10px #d92c2c66;
}

.board-game-card.has-pending {
    border-color: #e56a6a;
    box-shadow: 0 0 0 1px #ffd3d3, 0 8px 18px #e56a6a44;
}

#boardPendingJoinList {
    gap: 10px;
}

#boardParticipantList {
    gap: 10px;
}

#boardPendingJoinList .board-pending-request-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #bfd3ff;
    border-radius: 14px;
    background: linear-gradient(135deg, #f6f9ff 0%, #edf3ff 100%);
    padding: 10px 12px;
}

#boardPendingJoinList .board-pending-request-card .friend-list-link {
    flex: 1;
    min-width: 0;
}

#boardPendingJoinList .board-pending-request-card .friend-list-link.is-disabled {
    pointer-events: none;
    opacity: 0.75;
}

#boardPendingJoinList .board-pending-request-card .friend-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#boardPendingJoinList .board-pending-request-card .friend-list-info {
    min-width: 0;
}

#boardPendingJoinList .board-pending-request-card .friend-list-label {
    color: #1f3570;
    font-size: 1.02rem;
    margin-bottom: 2px;
}

#boardPendingJoinList .board-pending-request-card .friend-list-username {
    color: #4b5f88;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.board-pending-request-comment {
    margin-top: 4px;
    color: #2b3c66;
    font-size: 0.84rem;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

#boardPendingJoinList .board-pending-request-card .friend-card-controls {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

#boardPendingJoinList .board-pending-request-card .friend-card-controls .primary,
#boardPendingJoinList .board-pending-request-card .friend-card-controls .secondary {
    margin-top: 0;
    min-width: 96px;
    border-width: 1px;
}

#boardPendingJoinList .board-pending-request-card .friend-card-controls .primary {
    background: #ffd84d;
    border-color: #e1b100;
    color: #3f2b00;
}

#boardPendingJoinList .board-pending-request-card .friend-card-controls .primary:hover {
    background: #ffcf2b;
}

#boardPendingJoinList .board-pending-request-card .friend-card-controls .secondary {
    background: #e14b4b;
    border-color: #c83131;
    color: #ffffff;
}

#boardPendingJoinList .board-pending-request-card .friend-card-controls .secondary:hover {
    background: #cf3737;
}

#boardParticipantList .board-participant-card {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 1px solid #bfd3ff;
    border-radius: 14px;
    background: linear-gradient(135deg, #f6f9ff 0%, #edf3ff 100%);
    padding: 10px 12px;
}

#boardParticipantList .board-participant-card .friend-list-link {
    flex: 1;
    min-width: 0;
}

#boardParticipantList .board-participant-card .friend-list-link.is-disabled {
    pointer-events: none;
    opacity: 0.75;
}

#boardParticipantList .board-participant-card .friend-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#boardParticipantList .board-participant-card .friend-list-info {
    min-width: 0;
}

#boardParticipantList .board-participant-card .friend-list-label {
    color: #1f3570;
    font-size: 1.02rem;
    margin-bottom: 2px;
}

#boardParticipantList .board-participant-card .friend-list-username {
    color: #4b5f88;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.message-section {
    margin-top: 12px;
}

.friend-section h3 {
    margin: 0 0 10px;
    color: var(--label-heading-color);
    text-shadow: 0 0 6px #d29bff, 0 0 12px #c25dff66;
}

.guest-mode-panel {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 14px 18px;
    align-items: center;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid #8cb3f1;
    background:
        radial-gradient(circle at 10% 20%, #e6f1ff 0%, transparent 42%),
        radial-gradient(circle at 88% 80%, #efe6ff 0%, transparent 46%),
        linear-gradient(135deg, #f7fbff 0%, #f2f7ff 48%, #f9f4ff 100%);
    box-shadow: 0 8px 18px #8cb7ff33;
}

.guest-mode-panel h3 {
    margin: 0;
}

.guest-mode-panel .help-text {
    margin: 30px 0 0;
    color: #2f4777;
    line-height: 1.65;
}

.guest-login-link {
    min-width: 200px;
    margin: 0;
    justify-self: end;
    box-shadow: 0 8px 16px #4f83ff44;
}

.dm-search-section input {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font: inherit;
}

.dm-conversation-cards {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-conversation-card {
    margin: 0;
}

.dm-conversation-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border: 1px solid #d1e2ff;
    border-radius: 12px;
    background: #fff;
    text-decoration: none;
    color: inherit;
}

.dm-conversation-link:hover {
    border-color: #72c8ff;
    background: #e8f4ff;
    box-shadow: 0 8px 18px #8bcfff44;
    transform: translateY(-1px);
}

.dm-avatar {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #21439a;
    background: linear-gradient(135deg, #e8f4ff 0%, #d8edff 100%);
    border: 1px solid #b9d8ff;
}

.dm-avatar-image {
    display: block;
    object-fit: cover;
}

.dm-conversation-body {
    min-width: 0;
    flex: 1;
}

.dm-conversation-title {
    font-weight: 700;
    color: #21439a;
}

.dm-conversation-preview {
    margin-top: 2px;
    color: #4b5f88;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-chat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
}

.dm-chat-header h2 {
    margin: 0;
}

.dm-chat-section {
    min-height: 380px;
    background:
        linear-gradient(0deg, #eaf6dc, #eaf6dc),
        linear-gradient(90deg, #deefd0 1px, transparent 1px),
        linear-gradient(#deefd0 1px, transparent 1px);
    background-size: auto, 26px 26px, 26px 26px;
    border: 1px solid #c8deae;
}

.dm-message-thread {
    list-style: none;
    margin: 0;
    padding: 8px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 440px;
    overflow-y: auto;
}

.dm-message-item {
    display: flex;
    flex-direction: column;
    max-width: 74%;
}

.dm-message-item.mine {
    align-self: flex-end;
    align-items: flex-end;
}

.dm-message-item.theirs {
    align-self: flex-start;
    align-items: flex-start;
}

.dm-message-bubble {
    padding: 9px 12px;
    border-radius: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

.dm-message-item.mine .dm-message-bubble {
    background: #9de86f;
    color: #173a1d;
    border-top-right-radius: 4px;
}

.dm-message-item.theirs .dm-message-bubble {
    background: #ffffff;
    border: 1px solid #d9e5f8;
    color: #1e2e57;
    border-top-left-radius: 4px;
}

.dm-message-meta {
    margin-top: 2px;
    font-size: 0.76rem;
    color: #5c6f95;
}

.dm-attachment-wrap {
    margin-top: 8px;
}

.dm-attachment-image {
    display: block;
    max-width: min(280px, 60vw);
    border-radius: 10px;
    border: 1px solid #c8d7ec;
}

.dm-attachment-video {
    display: block;
    max-width: min(320px, 62vw);
    border-radius: 10px;
    border: 1px solid #c8d7ec;
    background: #000;
}

.dm-attach-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid #b7cdef;
    background: #ffffff;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.dm-input-toolbar {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;
}

.dm-attach-button:hover {
    border-color: #72c8ff;
    box-shadow: 0 6px 14px #8bcfff44;
}

.join-page-header {
    justify-content: center !important;
    min-height: 46px;
}

.join-page-title {
    margin: 0;
    text-align: center;
    color: #21439a;
    text-shadow: 0 0 6px #d8f3ff, 0 0 14px #5dd6ff, 0 0 24px #8b7bff99;
    animation: hero-neon-flicker 4.2s linear infinite;
}

.join-top-link {
    align-self: flex-end;
    display: inline-flex;
    width: fit-content;
    margin-bottom: 8px;
    min-width: auto;
    padding: 4px 0;
    font-size: 0.78rem;
    line-height: 1.1;
}

.board-create-back-link {
    padding: 8px 12px;
    line-height: 1.25;
}

.friend-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.friend-list-item.is-selected {
    border: 1px solid #5f7dffcc;
    box-shadow: 0 0 0 2px rgba(95, 125, 255, 0.14), 0 14px 30px rgba(36, 57, 97, 0.12);
}

.friend-list-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: inherit;
    text-decoration: none;
    min-width: 0;
}

.friend-list-label {
    color: #21439a;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.preset-participant-picker-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 4px 0 12px;
    padding: 14px 16px;
    border: 1px solid transparent;
    border-radius: 16px;
    background: linear-gradient(135deg, #1e72ff 0%, #6a8dff 42%, #8a5cff 100%);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.04em;
    box-shadow: 0 14px 28px rgba(30, 114, 255, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.preset-participant-picker-button:hover {
    transform: translateY(-1px);
    filter: saturate(1.08) brightness(1.03);
    box-shadow: 0 18px 34px rgba(30, 114, 255, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.26);
}

.preset-participant-picker-button:active {
    transform: translateY(0);
    box-shadow: 0 10px 22px rgba(30, 114, 255, 0.24);
}

.preset-participant-picker-button:focus-visible {
    outline: 3px solid rgba(30, 114, 255, 0.32);
    outline-offset: 2px;
}

.preset-participant-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 12px;
    min-height: 140px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.friend-share-picker-screen {
    border: 0;
    padding: 0;
    width: min(100%, 820px);
    max-width: calc(100vw - 28px);
    background: transparent;
    overflow: visible;
}

.friend-share-picker-screen::backdrop {
    background: rgba(9, 16, 38, 0.58);
    backdrop-filter: blur(8px);
}

.friend-share-picker-screen .preset-participant-picker-panel {
    width: min(100%, 780px);
    max-height: calc(100vh - 36px);
    overflow: auto;
    border: 1px solid #a4c0ff;
    border-radius: 20px;
    padding: 16px;
    background:
        radial-gradient(circle at 10% 10%, #eef8ff 0%, transparent 34%),
        radial-gradient(circle at 90% 12%, #f3e9ff 0%, transparent 34%),
        linear-gradient(150deg, #ffffff 0%, #f3f8ff 48%, #fff7fb 100%);
    box-shadow: 0 26px 60px rgba(9, 16, 38, 0.45);
}

.friend-share-picker-screen .preset-participant-picker-panel h3 {
    margin-top: 0;
}

.preset-participant-picker-grid .friend-list-item {
    border: 1px solid #5f7dff66;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f59be66 0%, #6668ca66 100%);
    padding: 10px 12px;
    gap: 12px;
}

.preset-participant-picker-grid .friend-list-link {
    flex: 1;
    min-width: 0;
}

.preset-participant-picker-grid .friend-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.preset-participant-picker-grid .friend-list-info {
    min-width: 0;
}

.preset-participant-picker-grid .friend-list-label {
    color: #f4f7ff;
    font-size: 1.04rem;
    margin-bottom: 2px;
}

.preset-participant-picker-grid .friend-list-username {
    color: #d3dcff;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-list-page .friend-list-section {
    padding: 16px;
}

.friends-list-page .friend-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 12px;
    min-height: 140px;
}

.friends-list-page .friend-list-item {
    border: 1px solid #5f7dff66;
    border-radius: 14px;
    background: linear-gradient(135deg, #4f59be66 0%, #6668ca66 100%);
    padding: 10px 12px;
    gap: 12px;
}

.friends-list-page .friend-list-link {
    flex: 1;
    min-width: 0;
}

.friends-list-page .friend-avatar-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.friends-list-page .friend-list-info {
    min-width: 0;
}

.friends-list-page .friend-list-label {
    color: #f4f7ff;
    font-size: 1.04rem;
    margin-bottom: 2px;
}

.friends-list-page .friend-list-username {
    color: #d3dcff;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.friends-list-page .friend-card-controls {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.friends-list-page .mini-list button {
    margin-top: 0;
    font-size: 0.76rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 5px 10px;
}

.friends-list-page .friend-card-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #eaf1ff;
    min-height: 120px;
}

.friend-profile-image {
    width: 120px;
    max-width: 40vw;
    height: auto;
    margin: 4px 0 10px;
}

.friend-profile-dm-button {
    font-size: 1.05rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    padding: 6px 10px;
    min-width: auto;
    line-height: 1.1;
}

.inline-form {
    display: flex;
    gap: 8px;
}

.inline-form input {
    flex: 1;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    font: inherit;
    background: #ffffff;
    color: #15213f;
    caret-color: #15213f;
}

.friend-columns {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.friend-columns h4 {
    margin: 0 0 6px;
    font-size: 0.85rem;
    color: var(--label-text-color);
    text-shadow: none;
}

.mini-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 34px;
}

.mini-list li {
    font-size: 0.85rem;
    background: #ffffff;
    border: 1px solid #d9e6ff;
    border-radius: 8px;
    padding: 6px;
}

.ranking-tabs {
    display: flex;
    gap: 8px;
    margin: 8px 0 10px;
}

.ranking-tab {
    border: 1px solid #b9d8ff;
    background: #ffffff;
    color: #21439a;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-weight: 700;
}

.ranking-tab.active {
    background: #21439a;
    color: #ffffff;
    border-color: #21439a;
}

.ranking-list {
    gap: 8px;
}

.ranking-item {
    display: grid;
    grid-template-columns: 40px 36px 1fr;
    gap: 8px;
    align-items: center;
}

.ranking-item.current-user {
    border-color: #62ceff;
    box-shadow: 0 0 0 2px #c9f1ff;
}

.ranking-medal {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 700;
    color: #375b9d;
}

.ranking-avatar {
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #dce9ff;
    display: block;
    object-fit: cover;
    overflow: hidden;
}

.ranking-title {
    font-size: 0.88rem;
    font-weight: 700;
    color: #1f3570;
}

.ranking-meta {
    margin-top: 2px;
    font-size: 0.78rem;
    color: #4b5f88;
}

.ranking-progress-track {
    margin-top: 5px;
    width: 100%;
    height: 7px;
    border-radius: 999px;
    overflow: hidden;
    background: #e7effd;
}

.ranking-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #49b6ff, #3be1b2);
}

.mini-list button {
    margin-top: 4px;
    border: 0;
    border-radius: 6px;
    padding: 4px 6px;
    background: #dce9ff;
    color: #1c4b9b;
    font-size: 0.8rem;
    cursor: pointer;
    transition: transform 0.16s ease, background-color 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.schedule-card {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 10px;
    background: #ffffff;
}

.app-shell:not(.friends-shell) .schedule-card {
    background:
        linear-gradient(145deg, #ffffff 0%, #f5fbff 52%, #fff7ee 100%);
    border-color: #a8d7ff;
    box-shadow: inset 0 0 0 1px #e3f2ff, 0 8px 18px #a4d7ff40;
}

.friends-shell.vivid-shell .schedule-pane {
    background:
        radial-gradient(circle at 10% 14%, #e4f4ff 0%, transparent 34%),
        radial-gradient(circle at 88% 18%, #ffe8f7 0%, transparent 34%),
        linear-gradient(150deg, #f7fcff 0%, #eef6ff 52%, #f8f0ff 100%);
    border: 1px solid #90d3ff;
    box-shadow: inset 0 0 0 1px #d9efff, 0 16px 34px #86ccff52;
}

.friends-shell.vivid-shell .friend-section {
    background:
        radial-gradient(circle at 86% 14%, #fff0dc 0%, transparent 30%),
        radial-gradient(circle at 14% 86%, #e9f5ff 0%, transparent 32%),
        #fffdf9;
    border-color: #ffc88f;
    box-shadow: inset 0 0 0 1px #ffe3c0, 0 10px 24px #ffbf6b40;
}

.friends-shell.vivid-shell .board-entry-card {
    border-width: 2px;
    box-shadow: inset 0 0 0 1px #ffffff, 0 10px 22px #95cfff55;
}

.friends-shell.vivid-shell .board-game-card {
    border: 1px solid #a7d6ff;
    background: linear-gradient(145deg, #ffffff 0%, #f2f9ff 100%);
    box-shadow: inset 0 0 0 1px #e0f1ff, 0 8px 18px #9fd3ff44;
}

.board-post-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 10px;
    min-height: 90px;
}

.board-post-summary-item {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    display: flex;
    flex-direction: column;
}

.board-post-summary-button {
    width: 100%;
    text-align: left;
    border: 1px solid #9db8ff;
    border-radius: 14px;
    background: linear-gradient(145deg, #eef4ff 0%, #dce9ff 100%);
    padding: 14px 14px;
    color: #1d2f66;
    cursor: pointer;
    box-shadow: inset 0 0 0 1px #ffffffaa, 0 6px 14px #7ea7ff40;
}

.board-post-summary-date {
    display: block;
    width: 100%;
    font-size: 1.14rem;
    font-weight: 800;
    color: #142a63;
}

.board-post-summary-limit,
.board-post-summary-author {
    display: block;
    width: 100%;
    margin-top: 8px;
    font-size: 0.98rem;
    font-weight: 700;
    color: #203a78;
}

.board-post-summary-item .report-button {
    margin-top: 12px;
    align-self: flex-start;
    min-height: 0;
    width: auto;
    padding: 4px 9px;
    border-radius: 999px;
    font-size: 0.8rem;
    line-height: 1.2;
    border-color: #c83131;
    background: #e14b4b;
    color: #ffffff;
    box-shadow: 0 4px 12px #c8313155;
}

.board-post-summary-item .report-button:hover {
    background: #cf3737;
}

.friends-shell.vivid-shell .dm-conversation-link {
    border: 2px solid #a8d7ff;
    background:
        linear-gradient(140deg, #ffffff 0%, #f1f8ff 52%, #fff3e5 100%);
    box-shadow: inset 0 0 0 1px #e3f2ff, 0 8px 18px #9dcfff44;
}

.friends-shell.vivid-shell .dm-chat-section {
    border: 2px solid #b6d6a4;
    box-shadow: inset 0 0 0 1px #e8f3dd, 0 10px 22px #9fca7c44;
}

.schedule-card.focused {
    border-color: #42d9ff;
    box-shadow: 0 0 0 2px #b7f0ff;
}

.schedule-card h4 {
    margin: 0 0 6px;
    color: #1460c9;
    text-shadow: 0 0 6px #89ddff, 0 0 12px #6c8dff55;
}

.schedule-owner {
    margin: 0 0 4px;
    color: var(--muted);
    font-size: 0.8rem;
    text-shadow: none;
}

.schedule-time {
    color: var(--muted);
    font-size: 0.9rem;
}

.schedule-priority,
.schedule-complete {
    margin: 4px 0 0;
    font-size: 0.82rem;
    color: #2b4e93;
}

.schedule-complete.playing {
    color: #56ff8f;
    font-weight: 800;
}

.schedule-complete.ended {
    color: #d93939;
    font-weight: 800;
}

.schedule-participation {
    margin: 8px 0 4px;
    font-size: 0.86rem;
    color: #85d9ff;
    font-weight: 700;
    text-shadow: 0 0 4px #d7f2ff;
}

.schedule-closed-text {
    color: #d92c2c !important;
    font-weight: 800;
    margin-left: 0.25em;
}

.schedule-complete-prompt {
    margin: 6px 0 2px;
    padding: 6px 8px;
    border-radius: 8px;
    border: 1px solid #ffb46a;
    background: #fff3e4;
    color: #8a4b16;
    font-size: 0.78rem;
    font-weight: 700;
}

.schedule-participants {
    margin: 0;
    font-size: 0.82rem;
    color: var(--muted);
}

.schedule-participants p {
    margin: 0 0 4px;
}

.schedule-participant-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.schedule-participant-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border: 1px solid #d6e5ff;
    border-radius: 999px;
    padding: 4px 8px 4px 4px;
    background: #f8fbff;
}

.schedule-participant-item span,
.schedule-participant-item a {
    color: #5a3d00 !important;
    font-weight: 700;
    text-shadow: none;
}

.schedule-participant-item img {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #c8daf8;
}

.join-actions {
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.join-actions span {
    font-size: 0.82rem;
    color: var(--muted);
}

.join-actions .closed-label {
    color: #ff7ea7;
    font-weight: 700;
    text-shadow: 0 0 4px #ffd7e8;
}

.join-btn,
.leave-btn {
    border: 0;
    border-radius: 8px;
    padding: 6px 10px;
    cursor: pointer;
    font-size: 0.84rem;
}

.join-btn {
    background: #1a3f58;
    color: #7ae7ff;
    box-shadow: 0 0 12px #35cfff66;
}

.leave-btn {
    background: #4a2034;
    color: #ff9db8;
    box-shadow: 0 0 12px #ff5ccf55;
}

.schedule-actions {
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.schedule-actions button {
    border: 0;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.edit-btn {
    background: #233f6f;
    color: #9ac2ff;
}

.delete-btn {
    background: #4e1f30;
    color: var(--danger);
}

.share-btn {
    background: #11385c;
    color: #9be4ff;
}

.complete-btn {
    background: #144f34;
    color: #b3ffd6;
}

.uncomplete-btn {
    background: #3d4161;
    color: #d7dbff;
}

button:hover,
a.auth-link-button:hover,
.mini-list button:hover,
.schedule-actions button:hover,
.month-switch button:hover,
#newScheduleButton:hover,
.form-actions button:hover {
    transform: translateY(-1px);
    filter: brightness(1.05);
}

button:active,
a.auth-link-button:active,
.mini-list button:active,
.schedule-actions button:active,
.month-switch button:active,
#newScheduleButton:active,
.form-actions button:active {
    transform: translateY(0);
    filter: brightness(0.98);
}

.edit-btn:hover {
    background: #2d4f89;
    color: #cfe0ff;
}

.delete-btn:hover {
    background: #6d243d;
    color: #ffc2d2;
}

.share-btn:hover {
    background: #18507e;
    color: #d2f3ff;
}

.complete-btn:hover {
    background: #1d7049;
    color: #d3ffe7;
}

.uncomplete-btn:hover {
    background: #52587e;
    color: #eef0ff;
}

.schedule-form {
    display: grid;
    gap: 8px;
}

.schedule-editor-scroll {
    max-height: 48vh;
    overflow-y: auto;
    padding-right: 4px;
}

.schedule-form label {
    color: var(--label-text-color);
    text-shadow: 0 0 4px #beddff;
}

.schedule-form input,
.schedule-form select,
.schedule-form textarea {
    width: 100%;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 8px;
    font: inherit;
    background: #ffffff;
    color: var(--ink);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background-color 0.18s ease;
}

.schedule-form input:hover,
.schedule-form select:hover,
.schedule-form textarea:hover {
    border-color: #66dfff;
    box-shadow: 0 0 0 3px #d6f7ff;
}

.schedule-form input:focus,
.schedule-form select:focus,
.schedule-form textarea:focus {
    outline: none;
    border-color: #2dc8ff;
    box-shadow: 0 0 0 3px #c6efff, 0 0 12px #6adfff99;
    transform: translateY(-1px);
}

#recruitmentLimit:disabled {
    background: #f4f6fb;
    color: #8a93ad;
}

.inline-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
}

.inline-check input {
    width: auto;
}

.inline-check input:disabled {
    opacity: 0.7;
}

.title-voice-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.title-voice-row input {
    flex: 1;
}

.voice-preview {
    min-height: 1.2em;
    margin-top: -2px;
}

.voice-mic-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
    border-radius: 999px;
    padding: 0;
    font-size: 1rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.voice-mic-button.is-recording {
    background: #e83e5e;
    color: #ffffff;
    box-shadow: 0 0 0 3px #ffd5dd, 0 0 14px #ff5a7b99;
}

.form-message {
    min-height: 20px;
    margin: 0;
    color: var(--danger);
    text-shadow: 0 0 3px #ffd9df;
}

.form-actions {
    display: flex;
    gap: 8px;
}

.primary {
    background: var(--accent);
    color: #fff;
    box-shadow: 0 0 14px #42d9ff88;
}

.secondary {
    background: #e7efff;
    color: #2c4171;
    box-shadow: 0 0 10px #384d7f66;
}

.help-text {
    margin: 0 0 10px;
    color: var(--label-muted-color);
}

.level-progress-track {
    width: 100%;
    height: 14px;
    border-radius: 999px;
    background: #e8eefb;
    border: 1px solid #c6d7f2;
    overflow: hidden;
    margin: 8px 0;
}

.level-progress-bar {
    height: 100%;
    width: 0;
    background: linear-gradient(90deg, #4ab8ff, #3ce3b2);
    transition: width 0.3s ease;
}

.success-text {
    color: #087057;
    margin: 6px 0;
}

.auth-shell {
    max-width: 900px;
    grid-template-columns: 1fr 1fr;
}

.auth-single-shell {
    max-width: 520px;
    grid-template-columns: 1fr;
}

.auth-title-hero {
    margin-top: 50px;
    margin-bottom: 12px;
}

.auth-title-hero h1 {
    color: #183a8a;
    text-shadow:
        0 0 6px #5ee7ff,
        0 0 14px #5ee7ff,
        0 0 28px #3bb8ff,
        0 0 42px #ad6bff;
}

.auth-centered-shell {
    margin-top: -90px;
    min-height: calc(100vh - 220px);
    align-content: center;
}

.auth-single-card {
    min-height: auto;
}

.auth-link-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-color 0.18s ease;
}

.auth-submit-button {
    width: 100%;
    min-height: 50px;
    padding: 14px 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
}

.auth-back-link-button {
    min-height: 42px;
    padding: 9px 12px;
    font-size: 0.94rem;
}

.auth-link-button:hover {
    transform: translateY(-1px) scale(1.01);
    box-shadow: 0 0 16px #7ae6ff99;
    filter: brightness(1.03);
}

.auth-link-button:focus-visible {
    outline: 2px solid #42d9ff;
    outline-offset: 2px;
}

.csv-template-link {
    width: auto;
    min-width: 140px;
}

.auth-card h1 {
    margin-top: 0;
}

.auth-single-card h2 {
    color: #21439a;
    text-shadow:
        0 0 4px #c8f2ff,
        0 0 10px #65ddff,
        0 0 18px #7e7bff;
}

@media (max-width: 900px) {
    .page-hero {
        margin: 18px auto 8px;
    }

    .page-hero h1 {
        font-size: clamp(1.5rem, 7vw, 2.2rem);
    }

    .app-shell {
        grid-template-columns: 1fr;
    }

    .calendar-pane {
        position: static;
        top: auto;
    }

    .schedule-pane {
        max-height: none;
        overflow-y: visible;
    }

    .schedule-list {
        max-height: none;
    }

    .schedule-editor-scroll {
        max-height: 52vh;
    }

    .friend-columns {
        grid-template-columns: 1fr;
    }

    .profile-layout {
        grid-template-columns: 1fr;
    }

    .auth-shell {
        grid-template-columns: 1fr;
    }

    .inline-form {
        flex-wrap: wrap;
    }

    .inline-form input,
    .inline-form select,
    .inline-form button,
    .inline-form .auth-link-button {
        width: 100%;
    }

    .top-search-shell .inline-form input,
    .top-search-shell .inline-form select,
    .top-search-shell .inline-form button {
        min-height: 46px;
        padding: 11px 12px;
        border-radius: 10px;
    }

    .mini-list li {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .mini-list li button {
        margin-left: 0;
    }

    .friends-list-page .friend-list-item {
        flex-wrap: wrap;
    }

    .friends-list-page .friend-card-controls {
        width: 100%;
        justify-content: flex-start;
    }

    .guest-mode-panel {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 14px;
    }

    .guest-login-link {
        width: 100%;
        min-width: 0;
        justify-self: stretch;
    }
}

@media (max-width: 600px) {
    .app-shell {
        padding: 0 10px 18px;
    }

    .calendar-pane,
    .schedule-pane {
        padding: 12px;
    }

    .logout-floating {
        right: 10px;
        top: 58px;
    }

    .theme-toggle {
        right: 10px;
        top: 10px;
    }
}

.theme-toggle {
    position: fixed;
    top: 12px;
    right: 12px;
    z-index: 50;
    border: 1px solid #9ec7ff;
    border-radius: 999px;
    width: 42px;
    height: 42px;
    padding: 0;
    background: #ffffffd9;
    color: #1f3c74;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 12px #8fcfff70;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.theme-toggle:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px #67d8ff99;
}

.logout-floating {
    position: fixed;
    top: 12px;
    right: 62px;
    z-index: 50;
    margin: 0;
}

.logout-floating button {
    border: 1px solid #9ec7ff;
    border-radius: 999px;
    height: 42px;
    padding: 0 14px;
    background: #ffffffd9;
    color: #1f3c74;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 0 12px #8fcfff70;
}

.logout-floating button:hover {
    transform: translateY(-1px);
    box-shadow: 0 0 18px #67d8ff99;
}

body.dark-mode {
    --bg: radial-gradient(circle at 20% 15%, #203a6f 0%, transparent 34%),
        radial-gradient(circle at 84% 18%, #3a2f67 0%, transparent 32%),
        radial-gradient(circle at 50% 80%, #164d57 0%, transparent 40%),
        linear-gradient(150deg, #0e1428 0%, #121733 50%, #101d24 100%);
    --panel: #16213ae0;
    --line: #2b3b63;
    --ink: #dfe9ff;
    --muted: #9fb4de;
    --accent: #4fc7ff;
    --accent-soft: #1e2f55;
    --danger: #ff8fa8;
    --highlight: #ffd76a;
}

body.dark-mode::before,
body.dark-mode::after {
    opacity: 0.35;
}

body.dark-mode .calendar-pane,
body.dark-mode .schedule-pane,
body.dark-mode .profile-preview,
body.dark-mode .friend-section,
body.dark-mode .mini-list li,
body.dark-mode .schedule-card,
body.dark-mode .calendar-day {
    background: #17233d;
    border-color: #334a79;
    color: #dce8ff;
    box-shadow: 0 10px 22px #02071266;
}

body.dark-mode .calendar-day.saturday {
    background: #1b2d4b;
    color: #9fc8ff;
}

body.dark-mode .calendar-day.holiday {
    background: #3d2333;
    color: #ffb5d2;
    border-color: #8b4f6e;
}

body.dark-mode .schedule-form input,
body.dark-mode .schedule-form select,
body.dark-mode .schedule-form textarea,
body.dark-mode .inline-form input {
    background: #0f1a2f;
    color: #dbe7ff;
    border-color: #38548a;
}

body.dark-mode .schedule-form input::placeholder,
body.dark-mode .schedule-form textarea::placeholder,
body.dark-mode .inline-form input::placeholder {
    color: #8fa9d9;
}

body.dark-mode .hero-nav a,
body.dark-mode .secondary,
body.dark-mode .theme-toggle {
    color: #d8ddff;
    border-color: transparent;
}

body.dark-mode .hero-nav {
    border-color: #6677c7;
    background: linear-gradient(180deg, #334289 0%, #2a376f 100%);
    box-shadow: inset 0 1px 0 #6f82cf, 0 8px 20px #08133580;
}

body.dark-mode .hero-nav a:hover {
    background: #7f8fe25e;
    border-color: #95a5ea;
    color: #f1f4ff;
}

body.dark-mode .hero-nav a.is-current {
    background: linear-gradient(180deg, #7f53ed 0%, #6f47d9 100%);
    border-color: #c4b6ef;
    color: #f8f6ff;
    box-shadow: inset 0 0 0 1px #e9e2ff, 0 0 0 2px #8090d8;
}

body.dark-mode .logout-floating button {
    background: #1a2c4c;
    color: #c4daff;
    border-color: #395a90;
}

body.dark-mode .help-text,
body.dark-mode .user-badge,
body.dark-mode .schedule-owner,
body.dark-mode .schedule-time,
body.dark-mode .schedule-priority,
body.dark-mode .schedule-participants,
body.dark-mode .join-actions span {
    color: #a9bde4;
}

body.dark-mode .profile-showcase-card {
    background:
        radial-gradient(circle at 12% 14%, #1d4360 0%, transparent 40%),
        radial-gradient(circle at 86% 18%, #4f2e56 0%, transparent 38%),
        linear-gradient(145deg, #18243d 0%, #1a2843 48%, #2a1f3b 100%);
    border-color: #4fa3d4;
    box-shadow: inset 0 0 0 1px #2f6288, 0 10px 24px #132338;
}

body.dark-mode .profile-info-card {
    border-color: #b18655;
    background:
        radial-gradient(circle at 90% 12%, #4d3621 0%, transparent 38%),
        radial-gradient(circle at 16% 90%, #252e53 0%, transparent 42%),
        #1f2436;
    box-shadow: inset 0 0 0 1px #6f5a3a, 0 10px 22px #121a2e;
}

body.dark-mode .friends-shell.vivid-shell .schedule-pane {
    background:
        radial-gradient(circle at 10% 14%, #1d425d 0%, transparent 40%),
        radial-gradient(circle at 88% 18%, #4a2747 0%, transparent 40%),
        linear-gradient(150deg, #16213a 0%, #1a2742 52%, #2a1e39 100%);
    border-color: #4e9bc9;
    box-shadow: inset 0 0 0 1px #2f5d7e, 0 16px 34px #071121;
}

body.dark-mode .friends-shell.vivid-shell .friend-section {
    background:
        radial-gradient(circle at 86% 14%, #4d3522 0%, transparent 36%),
        radial-gradient(circle at 14% 86%, #253252 0%, transparent 38%),
        #1c2437;
    border-color: #8a6a42;
    box-shadow: inset 0 0 0 1px #5a472d, 0 10px 24px #0b1322;
}

body.dark-mode .form-message {
    color: #ffafc0;
}

body.dark-mode .guest-mode-panel {
    border-color: #4f70a7;
    background:
        radial-gradient(circle at 12% 18%, #203452 0%, transparent 44%),
        radial-gradient(circle at 88% 78%, #35284c 0%, transparent 42%),
        linear-gradient(140deg, #1a2840 0%, #1d2b45 58%, #2a1f3b 100%);
    box-shadow: inset 0 0 0 1px #30496f, 0 10px 22px #071122;
}

body.dark-mode .guest-mode-panel .help-text {
    color: #bcd0f3;
}

/* BbConect global palette: black / yellow / white */
body,
body.dark-mode {
    color: #f5f5f5;
}

.calendar-pane,
.schedule-pane,
.friend-section,
.auth-card,
.public-panel,
.calendar-day {
    background: linear-gradient(160deg, #fffdf6 0%, #fff4df 52%, #ffe8c3 100%) !important;
    border-color: #d4ad43 !important;
    color: #2c2108 !important;
    box-shadow: inset 0 0 0 1px #fff8e8, 0 10px 24px #00000026 !important;
}

.help-text,
.user-badge,
.schedule-owner,
.schedule-time,
.schedule-priority,
.schedule-participants,
.join-actions span,
label,
h1,
h2,
h3,
h4,
p,
li {
    color: #f5f5f5;
}

.calendar-pane h1,
.calendar-pane h2,
.calendar-pane h3,
.calendar-pane h4,
.schedule-pane h1,
.schedule-pane h2,
.schedule-pane h3,
.schedule-pane h4,
.friend-section h1,
.friend-section h2,
.friend-section h3,
.friend-section h4,
.calendar-pane p,
.schedule-pane p,
.friend-section p,
.calendar-pane li,
.schedule-pane li,
.friend-section li,
.calendar-pane label,
.schedule-pane label,
.friend-section label,
.calendar-pane .help-text,
.schedule-pane .help-text,
.friend-section .help-text,
.calendar-pane .user-badge,
.schedule-pane .user-badge {
    color: #2c2108 !important;
}

.profile-chip,
.profile-chip-cyan,
.profile-chip-pink,
.profile-chip-violet,
.profile-chip-orange {
    color: #201700 !important;
    background: linear-gradient(180deg, #ffd95a 0%, #e8b300 100%) !important;
    border-color: #ffea9a !important;
}

.primary,
.secondary,
button.primary,
button.secondary {
    background: linear-gradient(180deg, #ffd23d 0%, #e8b300 100%) !important;
    border-color: #ffea9a !important;
    color: #1a1404 !important;
    box-shadow: 0 6px 16px #00000066 !important;
}

.secondary {
    background: #1b1b1b !important;
    color: #ffe59d !important;
    border-color: #7a6326 !important;
}

input,
select,
textarea,
.inline-form input,
.inline-form select {
    background: #0f0f0f !important;
    color: #f5f5f5 !important;
    border-color: #5f4d18 !important;
}

input::placeholder,
textarea::placeholder {
    color: #cdbb85 !important;
}

input[type="date"] {
    padding-right: 40px;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(88%) sepia(41%) saturate(735%) hue-rotate(340deg) brightness(103%) contrast(101%);
    opacity: 1;
    cursor: pointer;
}

input[type="time"] {
    padding-right: 40px;
}

input[type="time"]::-webkit-calendar-picker-indicator {
    filter: invert(88%) sepia(41%) saturate(735%) hue-rotate(340deg) brightness(103%) contrast(101%);
    opacity: 1;
    cursor: pointer;
}

a {
    color: #ffd23d;
}

a:hover {
    color: #fff1b8;
}

.hero-nav a .nav-badge,
.schedule-owner-pending-badge,
.board-pending-badge,
.day-owner-pending-badge,
.admin-nav-card .nav-badge {
    background: #d92c2c !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 2px #111, 0 4px 10px #d92c2c88 !important;
}