:root {
    --app-bg: #f8f7ff;
    --app-bg-soft: #f3efff;
    --app-card: rgba(255, 255, 255, 0.92);

    --app-text: #47435a;
    --app-muted: #918ca0;

    --app-border: #e7e2ef;

    --app-primary: #7f72dc;
    --app-primary-2: #ee8fca;

    --header-height: 66px;
    --bottom-nav-height: 72px;
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Noto Sans JP",
        "Yu Gothic",
        "Hiragino Kaku Gothic ProN",
        Meiryo,
        sans-serif;

    color: var(--app-text);
}

body {
    background:
        radial-gradient(
            circle at 10% 5%,
            rgba(238, 143, 202, 0.15),
            transparent 30%
        ),
        radial-gradient(
            circle at 90% 8%,
            rgba(127, 114, 220, 0.15),
            transparent 32%
        ),
        linear-gradient(
            145deg,
            var(--app-bg),
            var(--app-bg-soft)
        );

    overflow: hidden;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
}


/* =========================================
   App shell
========================================= */

.app-shell {
    width: 100%;
    height: 100dvh;
    height: 100svh;

    display: flex;
    flex-direction: column;

    position: relative;
}


/* =========================================
   Header
========================================= */

.app-header {
    width: 100%;
    height: var(--header-height);

    flex: 0 0 var(--header-height);

    position: fixed;
    top: 0;
    left: 0;

    z-index: 100;

    border-bottom: 1px solid rgba(231, 226, 239, 0.8);

    background: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-header-inner {
    width: 100%;
    max-width: 900px;
    height: 100%;

    margin: 0 auto;

    padding:
        0 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.app-logo {
    display: flex;
    align-items: center;

    height: 48px;

    max-width: 190px;
}

.app-logo img {
    display: block;

    width: auto;
    height: 42px;

    max-width: 190px;

    object-fit: contain;
}


/* =========================================
   Menu button
========================================= */

.menu-button {
    width: 42px;
    height: 42px;

    padding: 9px;

    border: 0;
    border-radius: 13px;

    background: rgba(247, 244, 255, 0.9);

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 5px;

    cursor: pointer;
}

.menu-button span {
    display: block;

    width: 19px;
    height: 2px;

    border-radius: 999px;

    background: var(--app-primary);
}


/* =========================================
   Main
========================================= */

.app-main {
    width: 100%;

    flex: 1;

    overflow-y: auto;
    overflow-x: hidden;

    padding-top: var(--header-height);
    padding-bottom:
        calc(
            var(--bottom-nav-height)
            + env(safe-area-inset-bottom)
        );

    scroll-behavior: smooth;

    -webkit-overflow-scrolling: touch;
}


/* =========================================
   Main inner width
========================================= */

.welcome-section,
.app-hero,
.app-section,
.app-bottom-space {
    width: 100%;
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;
}


/* =========================================
   Welcome
========================================= */

.welcome-section {
    padding:
        28px 18px
        8px;
}

.welcome-label {
    margin: 0 0 5px;

    color: var(--app-primary);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.12em;
}

.welcome-section h1 {
    margin: 0;

    font-size: 25px;
    line-height: 1.45;

    font-weight: 700;

    letter-spacing: 0.02em;
}

.welcome-email {
    margin: 3px 0 0;

    color: var(--app-muted);

    font-size: 12px;

    line-height: 1.5;

    word-break: break-all;
}


/* =========================================
   Hero
========================================= */

.app-hero {
    padding:
        16px 18px
        22px;
}

.app-hero-inner {
    position: relative;

    overflow: hidden;

    padding:
        27px 23px;

    border-radius: 24px;

    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.96),
            rgba(238, 143, 202, 0.91)
        );

    color: #ffffff;

    box-shadow:
        0 16px 35px rgba(127, 114, 220, 0.18);
}

.app-hero-inner::before {
    content: "";

    position: absolute;

    width: 180px;
    height: 180px;

    top: -85px;
    right: -60px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.13);
}

.app-hero-inner::after {
    content: "";

    position: absolute;

    width: 100px;
    height: 100px;

    bottom: -55px;
    left: -35px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.10);
}

.app-hero-label {
    position: relative;
    z-index: 1;

    margin: 0 0 8px;

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.16em;

    opacity: 0.9;
}

.app-hero h2 {
    position: relative;
    z-index: 1;

    margin: 0;

    font-size: 25px;

    line-height: 1.55;

    font-weight: 700;

    letter-spacing: 0.02em;
}

.app-hero p:last-child {
    position: relative;
    z-index: 1;

    margin: 10px 0 0;

    font-size: 12px;

    line-height: 1.7;

    opacity: 0.93;
}


/* =========================================
   Section
========================================= */

.app-section {
    padding:
        0 18px
        10px;
}

.section-heading {
    margin-bottom: 13px;
}

.section-heading h2 {
    margin: 0;

    font-size: 17px;

    line-height: 1.5;

    font-weight: 700;
}


/* =========================================
   Menu grid
========================================= */

.app-menu-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 12px;
}

.app-menu-card {
    min-height: 142px;

    display: flex;
    flex-direction: column;

    padding: 18px 16px;

    border: 1px solid rgba(231, 226, 239, 0.85);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.84);

    box-shadow:
        0 8px 22px rgba(88, 76, 126, 0.06);

    transition:
        transform 0.16s ease,
        box-shadow 0.16s ease,
        border-color 0.16s ease;
}

.app-menu-card:hover {
    transform: translateY(-2px);

    border-color:
        rgba(127, 114, 220, 0.25);

    box-shadow:
        0 12px 26px rgba(88, 76, 126, 0.09);
}

.app-menu-icon {
    width: 38px;
    height: 38px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin-bottom: 13px;

    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.13),
            rgba(238, 143, 202, 0.15)
        );

    color: var(--app-primary);

    font-size: 18px;
}

.app-menu-title {
    font-size: 14px;

    font-weight: 700;

    line-height: 1.5;
}

.app-menu-text {
    margin-top: 4px;

    color: var(--app-muted);

    font-size: 10px;

    line-height: 1.55;
}


/* =========================================
   Bottom space
========================================= */

.app-bottom-space {
    height: 30px;

    flex: 0 0 30px;
}


/* =========================================
   Bottom navigation
========================================= */

.app-bottom-nav {
    width: 100%;
    height:
        calc(
            var(--bottom-nav-height)
            + env(safe-area-inset-bottom)
        );

    position: fixed;

    left: 0;
    bottom: 0;

    z-index: 100;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    padding:
        7px 8px
        env(safe-area-inset-bottom);

    border-top:
        1px solid rgba(231, 226, 239, 0.85);

    background:
        rgba(255, 255, 255, 0.91);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.app-nav-item {
    width: 30%;
    max-width: 150px;

    min-height: 58px;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    border-radius: 15px;

    color: #aaa5b4;

    font-size: 10px;

    font-weight: 600;

    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

.app-nav-item.active {
    color: var(--app-primary);

    background:
        rgba(127, 114, 220, 0.08);
}

.app-nav-icon {
    font-size: 18px;

    line-height: 1;
}


/* =========================================
   PC
========================================= */

@media (min-width: 700px) {

    :root {
        --header-height: 72px;
        --bottom-nav-height: 76px;
    }

    .app-header-inner {
        padding:
            0 28px;
    }

    .app-logo img {
        height: 45px;
    }

    .welcome-section {
        padding:
            42px 28px
            10px;
    }

    .app-hero {
        padding:
            20px 28px
            30px;
    }

    .app-hero-inner {
        padding:
            36px 34px;
    }

    .app-hero h2 {
        font-size: 30px;
    }

    .app-section {
        padding:
            0 28px
            15px;
    }

    .app-menu-grid {
        grid-template-columns:
            repeat(4, minmax(0, 1fr));
    }

    .app-menu-card {
        min-height: 165px;
    }

    .app-bottom-space {
        height: 45px;
    }

    .app-bottom-nav {
        padding-left: 20px;
        padding-right: 20px;
    }
}


/* =========================================
   Small mobile
========================================= */

@media (max-width: 360px) {

    :root {
        --header-height: 62px;
        --bottom-nav-height: 70px;
    }

    .app-header-inner {
        padding-left: 13px;
        padding-right: 13px;
    }

    .app-logo {
        max-width: 160px;
    }

    .app-logo img {
        height: 37px;
        max-width: 160px;
    }

    .welcome-section {
        padding:
            23px 14px
            7px;
    }

    .welcome-section h1 {
        font-size: 23px;
    }

    .app-hero {
        padding:
            14px 14px
            20px;
    }

    .app-hero-inner {
        padding:
            24px 20px;
        border-radius: 21px;
    }

    .app-hero h2 {
        font-size: 22px;
    }

    .app-section {
        padding:
            0 14px
            8px;
    }

    .app-menu-grid {
        gap: 9px;
    }

    .app-menu-card {
        min-height: 130px;

        padding:
            15px 13px;
    }

    .app-menu-icon {
        width: 34px;
        height: 34px;

        margin-bottom: 10px;

        font-size: 16px;
    }

    .app-menu-title {
        font-size: 13px;
    }

    .app-menu-text {
        font-size: 9px;
    }
}
    .app-menu-panel.is-open { 
        transform: translateX(0);
}

/* =========================================
   Slide Menu
========================================= */

.menu-overlay {
    position: fixed;
    inset: 0;

    z-index: 150;

    background: rgba(55, 48, 78, 0.22);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition:
        opacity 0.22s ease,
        visibility 0.22s ease;
}

.menu-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}


/* =========================================
   Slide Menu Panel
========================================= */

.app-menu-panel {
    position: fixed;

    top: 0;
    right: 0;
    bottom: 0;

    z-index: 200;

    width: min(88vw, 360px);

    display: flex;
    flex-direction: column;

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

    background: rgba(255, 255, 255, 0.97);

    border-left:
        1px solid rgba(231, 226, 239, 0.9);

    box-shadow:
        -12px 0 35px rgba(70, 60, 100, 0.12);

    transform: translate3d(105%, 0, 0);

    transition:
        transform 0.25s ease;

    overflow-y: auto;

    -webkit-overflow-scrolling: touch;

    visibility: hidden;
}

.app-menu-panel.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
}


/* =========================================
   Menu Header
========================================= */

.app-menu-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 20px;

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

.menu-panel-label {
    margin: 0 0 3px;

    color: var(--app-primary);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.14em;
}

.menu-panel-title {
    margin: 0;

    font-size: 21px;
    font-weight: 700;
}

.menu-close-button {
    width: 40px;
    height: 40px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: 13px;

    background: #f6f3fc;

    color: var(--app-primary);

    font-size: 25px;
    font-weight: 300;

    line-height: 1;

    cursor: pointer;
}


/* =========================================
   Menu User
========================================= */

.menu-panel-user {
    margin: 18px 0;

    padding: 14px 15px;

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

    border-radius: 15px;

    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.06),
            rgba(238, 143, 202, 0.07)
        );
}

.menu-panel-user-label {
    display: block;

    margin-bottom: 4px;

    color: var(--app-primary);

    font-size: 10px;
    font-weight: 700;
}

.menu-panel-user-email {
    display: block;

    color: var(--app-text);

    font-size: 12px;

    line-height: 1.55;

    word-break: break-all;
}


/* =========================================
   Menu Navigation
========================================= */

.menu-panel-nav {
    display: flex;
    flex-direction: column;

    gap: 7px;
}

.menu-panel-link {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 10px 13px;

    border-radius: 14px;

    color: var(--app-text);

    font-size: 13px;
    font-weight: 600;

    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

.menu-panel-link:hover {
    background:
        rgba(127, 114, 220, 0.06);
}

.menu-panel-link.active {
    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.10),
            rgba(238, 143, 202, 0.10)
        );

    color: var(--app-primary);
}

.menu-panel-link-icon {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 10px;

    background:
        rgba(127, 114, 220, 0.08);

    color: var(--app-primary);

    font-size: 16px;
}


/* =========================================
   Menu Bottom
========================================= */

.menu-panel-bottom {
    margin-top: auto;

    padding-top: 20px;
}

.menu-logout-button {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    border:
        1px solid #ead9e1;

    border-radius: 14px;

    background: #fff8fb;

    color: #ad6682;

    font-size: 13px;
    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease;
}

.menu-logout-button:hover {
    background: #fff1f6;

    border-color: #e4c7d4;
}


/* =========================================
   Desktop
========================================= */

@media (min-width: 700px) {

    .app-menu-panel {
        width: 370px;

        padding-left: 27px;
        padding-right: 27px;
    }

}


/* =========================================
   Common Page Header
   /app/ user pages
========================================= */

.app-page-header {
    width: 100%;

    position: relative;

    margin: 0;

    padding:
        34px 18px
        58px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 8% 20%,
            rgba(255, 184, 220, 0.72),
            transparent 30%
        ),
        radial-gradient(
            circle at 28% 0%,
            rgba(255, 226, 159, 0.62),
            transparent 28%
        ),
        radial-gradient(
            circle at 52% 10%,
            rgba(190, 236, 255, 0.68),
            transparent 32%
        ),
        radial-gradient(
            circle at 76% 0%,
            rgba(206, 190, 255, 0.68),
            transparent 30%
        ),
        radial-gradient(
            circle at 96% 24%,
            rgba(255, 198, 226, 0.66),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffd8ed,
            #fff0c7,
            #dff5ff,
            #e9ddff,
            #ffdced
        );

    border-radius:
        0 0 34px 34px;
}

.app-page-header-inner {
    width: 100%;
    max-width: 900px;

    margin: 0 auto;
}

.app-page-label {
    margin: 0 0 8px;

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.12em;

    color: rgba(71, 67, 90, 0.68);
}

.app-page-header h1 {
    margin: 0;

    font-size: clamp(28px, 7vw, 38px);
    line-height: 1.2;

    font-weight: 800;

    color: var(--app-text);
}


/* =========================================
   RIPPLE × ENISHI Common App Header
========================================= */

.app-header {
    width: 100%;
    height: 110px;

    position: fixed;
    top: 0;
    left: 0;

    z-index: 100;

    overflow: visible;

    border-bottom: 0;

    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(255, 184, 220, 0.72),
            transparent 30%
        ),
        radial-gradient(
            circle at 30% 0%,
            rgba(255, 226, 159, 0.62),
            transparent 28%
        ),
        radial-gradient(
            circle at 54% 8%,
            rgba(190, 236, 255, 0.70),
            transparent 32%
        ),
        radial-gradient(
            circle at 78% 0%,
            rgba(206, 190, 255, 0.70),
            transparent 30%
        ),
        radial-gradient(
            circle at 98% 22%,
            rgba(255, 198, 226, 0.68),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #ffd8ed,
            #fff0c7,
            #dff5ff,
            #e9ddff,
            #ffdced
        );

    border-radius:
        0 0 42px 42px;
}


.app-header-inner {
    width: 100%;
    max-width: 900px;
    height: 100%;

    margin: 0 auto;

    padding:
        0 18px;

    box-sizing: border-box;

    position: relative;

    display: block;
}


.app-header-page-title {
    position: relative;
    z-index: 2;

    padding-top: 8px;

    transform: translateY(-16px);
}


.app-header-label {
    margin: 0 0 8px;

    color: rgba(71, 67, 90, 0.68);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.12em;
}


.app-header-page-title h1 {
    margin: 0;

    color: var(--app-text);

    font-size: clamp(30px, 8vw, 42px);
    line-height: 1.2;

    font-weight: 800;
}


.app-header-logo {
    position: absolute;

    z-index: 3;

    left: 50%;
    bottom: -62px;

    width: min(260px, 66vw);

    transform: translateX(-50%);

    display: block;
}


.app-header-logo img {
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;

    filter:
        drop-shadow(
            0 8px 12px rgba(88, 76, 126, 0.10)
        );
}


.app-header .menu-button {
    position: absolute;

    z-index: 5;

    top: 50%;
    right: 18px;

    transform: translateY(-50%);
}


/* =========================================
   Common Rainbow Header Layout
========================================= */

.app-shell {
    min-height: 100dvh;
}

.app-header {
    height: 145px;
}

.app-main {
    min-height: 100dvh;

    padding-top: 145px;

    padding-bottom:
        calc(
            var(--bottom-nav-height)
            + env(safe-area-inset-bottom)
        );
}

@media (min-width: 700px) {

    .app-header {
        height: 145px;
    }

    .app-main {
        padding-top: 145px;
    }

}

/* =========================================
   Rainbow Meteor Shower
========================================= */

.app-header {
    position: fixed;
    overflow: visible;
}

.rainbow-meteor-layer {
    position: absolute;
    inset: 0;

    z-index: 2;

    overflow: hidden;

    border-radius: 0 0 72px 72px;

    pointer-events: none;
}

.app-header-inner {
    position: relative;
    z-index: 10;
}

.rainbow-meteor {
    position: absolute;

    width: 115px;
    height: 3px;

    border-radius: 999px;

    opacity: 0;

    pointer-events: none;

    /*
     * 虹色の尾。
     * 右上側が尾、左下側が流星の頭。
     */
    background:
        linear-gradient(
            90deg,
            rgba(120, 90, 255, 0),
            rgba(120, 90, 255, 0.25),
            rgba(0, 210, 255, 0.55),
            rgba(255, 215, 0, 0.78),
            rgba(255, 105, 180, 1)
        );

    box-shadow:
        0 0 5px rgba(255,255,255,.9),
        0 0 12px rgba(150,120,255,.45);

    transform:
        rotate(135deg);

    transform-origin:
        right center;

    animation:
        rainbow-meteor-fall
        5.8s
        cubic-bezier(.22,.61,.36,1)
        infinite;
}

.rainbow-meteor::after {
    content: "";

    position: absolute;

    right: -4px;
    top: 50%;

    width: 8px;
    height: 8px;

    border-radius: 50%;

    transform: translateY(-50%);

    background: #fff;

    box-shadow:
        0 0 4px #fff,
        0 0 9px rgba(255,130,220,.95),
        0 0 15px rgba(80,190,255,.8);
}

.meteor-1 {
    top: -15px;
    right: 4%;
    width: 125px;
    animation-delay: 0s;
}

.meteor-2 {
    top: 12px;
    right: 28%;
    width: 95px;
    animation-delay: 1.25s;
}

.meteor-3 {
    top: -5px;
    right: 52%;
    width: 78px;
    animation-delay: 2.55s;
}

.meteor-4 {
    top: 35px;
    right: 15%;
    width: 105px;
    animation-delay: 3.55s;
}

.meteor-5 {
    top: 20px;
    right: 67%;
    width: 68px;
    animation-delay: 4.45s;
}

@keyframes rainbow-meteor-fall {

    0% {
        opacity: 0;
        transform:
            translate3d(70px,-70px,0)
            rotate(135deg);
    }

    12% {
        opacity: 0;
    }

    18% {
        opacity: .95;
    }

    42% {
        opacity: 1;
    }

    68% {
        opacity: .72;
    }

    82% {
        opacity: 0;
    }

    100% {
        opacity: 0;
        transform:
            translate3d(-360px,360px,0)
            rotate(135deg);
    }
}

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

    .rainbow-meteor {
        animation: none;
        opacity: 0;
    }

}


/* =========================================
   Home Welcome Greeting
========================================= */

.welcome-section h1 {
    font-size: 26px;
    line-height: 1.4;
    font-weight: 600;
    letter-spacing: 0.02em;
}



/* =========================================
   Home Welcome Greeting - Final Test
========================================= */

.welcome-section h1 {
    font-size: 20px;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 0.02em;
}



/* =========================================
   Home Welcome → Hero spacing
========================================= */

.app-hero {
    padding-top: 8px;
}


/* =========================================
   Vendor submenu under My Page
========================================= */

.menu-panel-subsection {
    margin:
        -4px 0 10px
        0;
    padding-left: 46px;
}

.menu-panel-sub-link {
    display: flex;

    align-items: center;

    gap: 7px;

    min-height: 34px;

    padding: 0 10px;

    border-radius: 10px;

    color: var(--app-muted);

    text-decoration: none;

    font-size: 11px;
    font-weight: 700;

    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.menu-panel-sub-link:hover {
    background:
        rgba(248, 247, 255, 0.82);

    color:
        var(--app-primary);
}

.menu-panel-sub-link-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 14px;

    font-size: 12px;

    color:
        var(--app-primary);
}



/* ==========================================================
   RIPUE Home Prototype
   ========================================================== */

.ripue-home-content {
    max-width: 760px;
    margin: 0 auto;
    padding: 0 0 32px;
}

.ripue-home-block {
    margin: 0 0 22px;
}

.ripue-home-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 12px;
}

.ripue-home-heading-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.75);
    font-size: 17px;
    flex: 0 0 34px;
}

.ripue-home-kicker {
    margin: 0 0 2px;
    font-size: 10px;
    letter-spacing: .16em;
    opacity: .55;
}

.ripue-home-heading h2 {
    margin: 0;
    font-size: 20px;
    line-height: 1.35;
}

.ripue-home-action-list,
.ripue-home-favorite-list {
    display: grid;
    gap: 9px;
}

.ripue-home-action-card,
.ripue-home-event {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 15px 16px;
    border-radius: 16px;
    background: rgba(255,255,255,.82);
    text-decoration: none;
    box-shadow: 0 4px 18px rgba(60,60,90,.06);
    transition: transform .18s ease, box-shadow .18s ease;
}

.ripue-home-action-card:hover,
.ripue-home-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 7px 22px rgba(60,60,90,.09);
}

.ripue-home-action-main,
.ripue-home-event > div {
    min-width: 0;
}

.ripue-home-action-main {
    display: grid;
    gap: 3px;
}

.ripue-home-action-label {
    font-size: 11px;
    opacity: .58;
}

.ripue-home-action-main strong,
.ripue-home-event strong {
    display: block;
    color: inherit;
    font-size: 15px;
    line-height: 1.5;
}

.ripue-home-action-status {
    font-size: 11px;
    opacity: .6;
}

.ripue-home-event {
    color: inherit;
}

.ripue-home-event > div {
    display: grid;
    gap: 2px;
}

.ripue-home-event span:not(.ripue-home-arrow) {
    font-size: 12px;
    opacity: .65;
}

.ripue-home-arrow {
    flex: 0 0 auto;
    font-size: 25px;
    line-height: 1;
    opacity: .4;
}

.ripue-home-accordion {
    display: grid;
    gap: 8px;
}

.ripue-home-details {
    overflow: hidden;
    border-radius: 16px;
    background: rgba(255,255,255,.76);
    box-shadow: 0 4px 18px rgba(60,60,90,.05);
}

.ripue-home-details summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 17px;
    cursor: pointer;
    list-style: none;
    font-weight: 600;
}

.ripue-home-details summary::-webkit-details-marker {
    display: none;
}

.ripue-home-details summary::after {
    content: '⌄';
    font-size: 16px;
    opacity: .45;
    transition: transform .18s ease;
}

.ripue-home-details[open] summary::after {
    transform: rotate(180deg);
}

.ripue-home-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    opacity: .5;
}

.ripue-home-details-body {
    padding: 0 10px 10px;
}

.ripue-home-details-body .ripue-home-event {
    margin-top: 7px;
    background: rgba(248,247,255,.82);
    box-shadow: none;
}

.ripue-home-empty {
    margin: 0;
    padding: 15px 16px;
    border-radius: 14px;
    background: rgba(255,255,255,.58);
    font-size: 13px;
    line-height: 1.7;
    opacity: .65;
}

@media (max-width: 600px) {

    .ripue-home-content {
        padding-bottom: 24px;
    }

    .ripue-home-heading h2 {
        font-size: 18px;
    }

    .ripue-home-action-card,
    .ripue-home-event {
        padding: 14px;
        border-radius: 14px;
    }

    .ripue-home-details summary {
        padding: 15px;
    }
}

/* ==========================================================
   RIPUE Home Layout
   基本ページ（探す・興味）と同じコンテンツ幅
   ========================================================== */

.ripue-home-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 18px 30px;
    box-sizing: border-box;
}

/* WELCOME hero */
.app-hero {
    width: 100%;
    max-width: 900px;
    margin: 6px auto 12px;
    padding-left: 18px;
    padding-right: 18px;
    box-sizing: border-box;
}

.app-hero-inner {
    padding-top: 8px;
    padding-bottom: 8px;
}

.app-hero-label {
    margin: 0 0 3px;
    text-align: right;
    font-size: 0.68rem;
    letter-spacing: 0.11em;
}

.app-hero h4 {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.55;
}

.ripue-home-block {
    width: 100%;
    box-sizing: border-box;
}

.ripue-home-block:has(.ripue-home-action-list:empty) {
    display: none;
}

.ripue-home-heading {
    margin-bottom: 10px;
}

@media (max-width: 600px) {
    .app-hero,
    .ripue-home-content {
        width: 100%;
        padding-left: 18px;
        padding-right: 18px;
    }

    .app-hero {
        margin-top: 6px;
        margin-bottom: 12px;
    }

    .app-hero-inner {
        padding-top: 8px;
        padding-bottom: 8px;
    }

    .app-hero h4 {
        font-size: 0.96rem;
        line-height: 1.55;
    }

    .app-hero-label {
        font-size: 0.66rem;
    }
}

/* ==========================================================
   RIPUE Home Calendar
   ========================================================== */

.ripue-home-calendar {
    width: calc(100% - 36px);
    margin: 8px 18px 0;
    box-sizing: border-box;
}

.ripue-calendar-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 10px;
}

.ripue-calendar-nav strong {
    font-size: 1rem;
    letter-spacing: 0.04em;
}

.ripue-calendar-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.5rem;
    line-height: 1;
    background: rgba(255,255,255,0.8);
    border: 1px solid rgba(120,110,170,0.18);
}

.ripue-calendar {
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(120,110,170,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
}

.ripue-calendar-weekdays,
.ripue-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ripue-calendar-weekdays {
    border-bottom: 1px solid rgba(120,110,170,0.14);
}

.ripue-calendar-weekdays span {
    padding: 8px 3px;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
}

.ripue-calendar-day {
    min-height: 82px;
    padding: 6px;
    box-sizing: border-box;
    border-right: 1px solid rgba(120,110,170,0.10);
    border-bottom: 1px solid rgba(120,110,170,0.10);
}

.ripue-calendar-day:nth-child(7n) {
    border-right: 0;
}

.ripue-calendar-day-empty {
    background: rgba(120,110,170,0.025);
}

.ripue-calendar-day-number {
    margin-bottom: 4px;
    font-size: 0.72rem;
    font-weight: 600;
}

.ripue-calendar-day.is-today .ripue-calendar-day-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 23px;
    height: 23px;
    border-radius: 50%;
    background: rgba(120,110,170,0.14);
}

.ripue-calendar-event {
    display: block;
    margin: 3px 0;
    padding: 4px 5px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.68rem;
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    background: rgba(120,110,170,0.09);
}

.ripue-home-copyright {
    padding: 18px 0 8px;
    text-align: center;
    font-size: 0.68rem;
    line-height: 1.5;
    opacity: 0.65;
}

.ripue-calendar-detail {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 18px 30px;
    box-sizing: border-box;
}

.ripue-calendar-back {
    display: inline-block;
    margin: 0 0 18px;
    text-decoration: none;
    font-size: 0.82rem;
}

.ripue-calendar-detail .ripue-home-heading {
    margin-bottom: 14px;
}

.ripue-calendar-detail h1 {
    margin: 0;
    font-size: 1.25rem;
    line-height: 1.45;
}

.ripue-calendar-detail-card {
    width: 100%;
    box-sizing: border-box;
    padding: 20px;
    border: 1px solid rgba(120,110,170,0.16);
    border-radius: 14px;
    background: rgba(255,255,255,0.72);
}

.ripue-calendar-detail-row {
    display: block;
    padding: 12px 0;
    border-bottom: 1px solid rgba(120,110,170,0.10);
}

.ripue-calendar-detail-row:last-child {
    border-bottom: 0;
}

.ripue-calendar-detail-row span {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    opacity: 0.65;
}

.ripue-calendar-detail-row strong {
    display: block;
    font-size: 0.88rem;
    line-height: 1.55;
}

.ripue-calendar-detail-description {
    padding: 14px 0 4px;
    font-size: 0.86rem;
    line-height: 1.75;
}

.ripue-calendar-detail-link {
    display: block;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 9px;
    text-decoration: none;
    font-size: 0.82rem;
    background: rgba(120,110,170,0.09);
}

@media (max-width: 600px) {
    .ripue-calendar-detail {
        padding-left: 18px;
        padding-right: 18px;
    }

    .ripue-calendar-detail-card {
        padding: 18px;
    }
}





/* ==========================================================
   RIPUE Home Archive / Calendar - Desktop Layout
   スマホ表示は既存レイアウトを維持
   ========================================================== */

@media (min-width: 900px) {

    .ripue-home-archive {
        width: calc(100% - 48px);
        max-width: 1100px;
        margin-left: auto;
        margin-right: auto;
    }

    .ripue-home-calendar {
        width: 100%;
        max-width: 900px;
        margin-left: auto;
        margin-right: auto;

        padding-left: 18px;
        padding-right: 18px;

        box-sizing: border-box;
    }

    .ripue-home-archive {
        margin-top: 10px;
    }

    .ripue-home-calendar {
        margin-top: 18px;
    }

    .ripue-home-calendar .ripue-calendar-day {
        min-height: 58px;
    }
}


/* ==========================================================
   RIPUE User Calendar Detail
   通常ユーザー画面用
   ========================================================== */

.calendar-view-container {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 18px 30px;
    box-sizing: border-box;
}

.calendar-view-back {
    display: inline-block;
    margin-bottom: 26px;
    color: var(--app-primary);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
}

.calendar-view-heading {
    margin-bottom: 22px;
}

.calendar-view-label {
    margin: 0 0 7px;
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.16em;
}

.calendar-view-heading h1 {
    margin: 0;
    color: var(--app-text);
    font-size: 28px;
    line-height: 1.35;
    letter-spacing: 0.02em;
}

.calendar-view-category {
    display: inline-flex;
    margin-top: 12px;
    padding: 5px 10px;
    border: 1px solid var(--app-border);
    border-radius: 999px;
    color: var(--app-muted);
    font-size: 10px;
    font-weight: 600;
    background: rgba(255,255,255,0.55);
}

.calendar-view-content {
    padding: 22px;
    border: 1px solid var(--app-border);
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.06),
            rgba(238, 143, 202, 0.07)
        );
    box-sizing: border-box;
}

.calendar-view-date {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    column-gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--app-border);
}

.calendar-view-date-month {
    color: var(--app-muted);
    font-size: 12px;
    font-weight: 600;
}

.calendar-view-date strong {
    color: var(--app-primary);
    font-size: 34px;
    line-height: 1;
}

.calendar-view-date-weekday {
    color: var(--app-muted);
    font-size: 11px;
    font-weight: 600;
}

.calendar-view-info {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 16px 0;
}

.calendar-view-info-item {
    padding: 9px 12px;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: rgba(255,255,255,0.65);
    min-height: 40px;
    box-sizing: border-box;
}

.calendar-view-info-label {
    display: block;
    margin-bottom: 5px;
    color: var(--app-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.calendar-view-info-item strong {
    display: block;
    color: var(--app-text);
    font-size: 14px;
    line-height: 1.5;
}

.calendar-view-description {
    padding: 17px 0 4px;
    color: var(--app-text);
    font-size: 13px;
    line-height: 1.85;
}

.calendar-view-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    margin-top: 12px;
    padding: 0 15px;
    border: 1px solid var(--app-border);
    border-radius: 13px;
    background: rgba(255,255,255,0.72);
    color: var(--app-primary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
    box-sizing: border-box;
}

@media (max-width: 600px) {

    .calendar-view-container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .calendar-view-heading h1 {
        font-size: 25px;
    }

    .calendar-view-content {
        padding: 18px;
    }

    .calendar-view-date {
        grid-template-columns: 1fr auto;
    }

    .calendar-view-date strong {
        grid-column: 1;
        grid-row: 1;
        font-size: 32px;
    }

    .calendar-view-date-month {
        grid-column: 1;
        grid-row: 2;
        margin-top: 4px;
    }

    .calendar-view-date-weekday {
        grid-column: 2;
        grid-row: 2;
    }

    .calendar-view-info {
        grid-template-columns: 1fr;
    }
}

/* =========================================
   Event Application Detail - Force Layout
========================================= */

html,
body {
    width: 100% !important;
    min-height: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

.app-shell {
    width: 100% !important;
    min-height: 100dvh !important;
    height: auto !important;

    display: block !important;

    overflow: visible !important;
}

.app-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100% !important;
    height: 72px !important;

    z-index: 100 !important;
}

.app-main {
    width: 100% !important;

    min-height: 100dvh !important;
    height: auto !important;

    display: block !important;
    flex: none !important;

    overflow: visible !important;

    padding-top: 145px !important;

    padding-bottom:
        calc(
            120px
            + env(safe-area-inset-bottom)
        ) !important;
}

.app-bottom-nav {
    position: fixed !important;
    left: 0 !important;
    bottom: 0 !important;

    width: 100% !important;

    z-index: 100 !important;
}

@media (min-width: 700px) {

    .app-header {
        height: 105px !important;
    }

    .app-main {
        padding-top: 105px !important;
    }

}

/* ==========================================================
   RIPUE Home
   あなたの今：左右2分割＋コンパクト操作ボタン
   ========================================================== */

.ripue-home-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.ripue-home-action-main {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ripue-home-action-status-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 34px;
    padding: 0 11px;

    border: 1px solid rgba(124, 105, 180, .16);
    border-radius: 999px;

    background: rgba(248, 247, 255, .96);

    color: var(--app-primary);
    text-decoration: none;

    white-space: nowrap;
}

.ripue-home-action-status-area .ripue-home-action-status {
    font-size: 11px;
    font-weight: 700;
    opacity: 1;
}

.ripue-home-action-status-area .ripue-home-arrow {
    font-size: 17px;
    opacity: .55;
}

@media (max-width: 600px) {

    .ripue-home-action-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .ripue-home-action-status-area {
        min-height: 32px;
        padding: 0 9px;
    }
}

CSS
/* ==========================================================
   RIPUE Home
   あなたの今：左右2分割＋コンパクト操作ボタン
   ========================================================== */

.ripue-home-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.ripue-home-action-main {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ripue-home-action-status-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 34px;
    padding: 0 11px;

    border: 1px solid rgba(124, 105, 180, .16);
    border-radius: 999px;

    background: rgba(248, 247, 255, .96);

    color: var(--app-primary);
    text-decoration: none;

    white-space: nowrap;
}

.ripue-home-action-status-area .ripue-home-action-status {
    font-size: 11px;
    font-weight: 700;
    opacity: 1;
}

.ripue-home-action-status-area .ripue-home-arrow {
    font-size: 17px;
    opacity: .55;
}

@media (max-width: 600px) {

    .ripue-home-action-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .ripue-home-action-status-area {
        min-height: 32px;
        padding: 0 9px;
    }
}


/* ==========================================================
   RIPUE Home
   あなたの今：左右2分割＋コンパクト操作ボタン
   ========================================================== */

.ripue-home-action-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
}

.ripue-home-action-main {
    min-width: 0;
    color: inherit;
    text-decoration: none;
}

.ripue-home-action-status-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 34px;
    padding: 0 11px;

    border: 1px solid rgba(124, 105, 180, .16);
    border-radius: 999px;

    background: rgba(248, 247, 255, .96);

    color: var(--app-primary);
    text-decoration: none;

    white-space: nowrap;
}

.ripue-home-action-status-area .ripue-home-action-status {
    font-size: 11px;
    font-weight: 700;
    opacity: 1;
}

.ripue-home-action-status-area .ripue-home-arrow {
    font-size: 17px;
    opacity: .55;
}

@media (max-width: 600px) {

    .ripue-home-action-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 10px;
    }

    .ripue-home-action-status-area {
        min-height: 32px;
        padding: 0 9px;
    }
}


/* ==========================================================
   RIPUE Home
   きっかけ：コンパクト表示
   ========================================================== */

.ripue-home-details {
    border-radius: 14px;
}

.ripue-home-details summary {
    min-height: 44px;
    padding: 11px 13px;
    font-size: 13px;
}

.ripue-home-details summary::after {
    font-size: 14px;
}

.ripue-home-details-body {
    padding: 0 8px 8px;
}

.ripue-home-details-body .ripue-home-event {
    min-height: 48px;
    margin-top: 6px;
    padding: 10px 11px;
    border-radius: 12px;
}

.ripue-home-details-body .ripue-home-event strong {
    font-size: 13px;
}

.ripue-home-details-body .ripue-home-event span:not(.ripue-home-arrow) {
    font-size: 11px;
}

.ripue-home-details-body .ripue-home-arrow {
    font-size: 18px;
}

@media (max-width: 600px) {

    .ripue-home-details summary {
        min-height: 42px;
        padding: 10px 12px;
    }

    .ripue-home-details-body .ripue-home-event {
        padding: 9px 10px;
    }
}


/* ==========================================================
   RIPUE Home
   きっかけ：小型ボタンレイアウト
   ========================================================== */

.ripue-home-accordion {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    align-items: start;
}

.ripue-home-details {
    overflow: visible;
    border-radius: 12px;
    background: transparent;
    box-shadow: none;
}

.ripue-home-details summary {
    min-height: 38px;
    padding: 8px 10px;

    border: 1px solid rgba(124, 105, 180, .16);
    border-radius: 999px;

    background: rgba(248, 247, 255, .96);

    font-size: 11px;
    font-weight: 700;

    white-space: nowrap;
}

.ripue-home-details summary::after {
    display: none;
}

.ripue-home-count {
    margin-left: 5px;
    font-size: 10px;
}

.ripue-home-details-body {
    grid-column: 1 / -1;

    width: 100%;
    padding: 8px 0 0;
}

@media (max-width: 600px) {

    .ripue-home-accordion {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
    }

    .ripue-home-details summary {
        min-height: 36px;
        padding: 7px 8px;
        font-size: 10px;
    }
}


/* ==========================================================
   RIPUE Home
   あなたの今：Modern Status Card
   ========================================================== */

.ripue-home-action-card {
    position: relative;

    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;

    padding: 16px 14px 16px 16px;

    border: 1px solid rgba(124, 105, 180, .12);
    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.98),
            rgba(248,247,255,.92)
        );

    box-shadow:
        0 10px 30px rgba(74, 63, 112, .07);
}

.ripue-home-action-main {
    display: grid;
    gap: 5px;

    min-width: 0;

    color: inherit;
    text-decoration: none;
}

.ripue-home-action-label {
    width: fit-content;

    padding: 4px 8px;

    border-radius: 999px;

    background: rgba(124, 105, 180, .08);

    color: var(--app-primary);

    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
}

.ripue-home-action-main strong {
    overflow: hidden;

    font-size: 14px;
    line-height: 1.45;

    text-overflow: ellipsis;
    white-space: nowrap;
}

.ripue-home-action-status-area {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    min-height: 36px;
    padding: 0 12px;

    border: 1px solid rgba(124, 105, 180, .14);
    border-radius: 999px;

    background: rgba(255,255,255,.92);

    color: var(--app-primary);
    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(74, 63, 112, .05);

    white-space: nowrap;
}

.ripue-home-action-status-area .ripue-home-action-status {
    font-size: 11px;
    font-weight: 800;
    opacity: 1;
}

.ripue-home-action-status-area .ripue-home-arrow {
    font-size: 18px;
    line-height: 1;
    opacity: .45;
}

@media (max-width: 600px) {

    .ripue-home-action-card {
        padding: 14px 12px 14px 14px;
        border-radius: 18px;
    }

    .ripue-home-action-main strong {
        font-size: 13px;
    }

    .ripue-home-action-status-area {
        min-height: 34px;
        padding: 0 10px;
    }
}

/* ==========================================================
   Home Event Information accordion layout
   ========================================================== */

.ripue-home-event-info .ripue-home-accordion {
    grid-template-columns: 1fr;
}

@media (min-width: 700px) {
    .ripue-home-event-info .ripue-home-accordion {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}


/* =========================================
   Menu User Card / Points
========================================= */

.menu-panel-user {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border-radius: 18px;
    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.10),
            rgba(238, 143, 202, 0.11)
        );
    box-shadow:
        0 6px 18px
        rgba(90,80,130,0.05);
}

.menu-panel-user-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.05em;
}

.menu-panel-user-email {
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
}

.menu-panel-points {
    margin-top: 11px;
    padding-top: 11px;
    border-top:
        1px solid
        rgba(127,114,220,0.12);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.menu-panel-points-label {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.68;
}

.menu-panel-points-value {
    font-size: 15px;
    font-weight: 800;
    color: var(--app-primary);
}


/* =========================================
   Menu Accordion
========================================= */

.menu-panel-group {
    border-radius: 14px;
    overflow: hidden;
}

.menu-panel-group summary {
    min-height: 54px;

    display: flex;
    align-items: center;

    gap: 13px;

    padding: 10px 13px;

    border-radius: 14px;

    color: var(--app-text);

    font-size: 13px;
    font-weight: 700;

    cursor: pointer;

    list-style: none;

    transition:
        background-color 0.16s ease,
        color 0.16s ease;
}

.menu-panel-group summary::-webkit-details-marker {
    display: none;
}

.menu-panel-group summary:hover {
    background:
        rgba(127,114,220,0.06);
}

.menu-panel-group[open] summary {
    background:
        linear-gradient(
            135deg,
            rgba(127,114,220,0.08),
            rgba(238,143,202,0.08)
        );

    color: var(--app-primary);
}

.menu-panel-group-arrow {
    margin-left: auto;

    font-size: 13px;

    opacity: 0.62;

    transition:
        transform 0.18s ease;
}

.menu-panel-group[open]
.menu-panel-group-arrow {
    transform: rotate(180deg);
}

.menu-panel-group-content {
    display: flex;
    flex-direction: column;

    gap: 5px;

    padding:
        5px 0
        8px 45px;
}

.menu-panel-child-link {
    min-height: 42px;

    display: flex;
    align-items: center;

    gap: 10px;

    padding: 8px 11px;

    border-radius: 12px;

    color: var(--app-text);

    font-size: 12px;
    font-weight: 600;

    text-decoration: none;
}

.menu-panel-child-link:hover {
    background:
        rgba(127,114,220,0.06);
}

.menu-panel-child-link.active {
    background:
        rgba(127,114,220,0.08);

    color: var(--app-primary);
}

.menu-panel-child-icon {
    width: 20px;

    flex: 0 0 20px;

    text-align: center;

    color: var(--app-primary);

    font-size: 13px;
}


/* =========================================
   Menu Admin Button
========================================= */

.menu-admin-button {
    width: 100%;
    min-height: 52px;

    display: flex;
    align-items: center;
    justify-content: center;

    gap: 8px;

    margin-bottom: 10px;

    border:
        1px solid
        rgba(127,114,220,0.18);

    border-radius: 14px;

    background:
        linear-gradient(
            135deg,
            rgba(127,114,220,0.12),
            rgba(238,143,202,0.12)
        );

    color: var(--app-primary);

    font-size: 13px;
    font-weight: 800;

    text-decoration: none;

    transition:
        background-color 0.16s ease,
        border-color 0.16s ease;
}

.menu-admin-button:hover {
    border-color:
        rgba(127,114,220,0.28);
}



/* =========================================
   Menu Accordion Marker Fix
========================================= */

.menu-panel-group summary::marker {
    content: "";
}

.menu-panel-group summary::-webkit-details-marker {
    display: none;
}

.menu-panel-group > summary {
    list-style: none;
}


/* =========================================
   Menu Points Button Reset
========================================= */

button.menu-panel-points {
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}


/* =========================================
   Menu Login + Points Connected Card
========================================= */

.menu-panel-user {
    margin-bottom: 0;
    border-radius: 18px 18px 0 0;
    border-bottom: 0;
}

.menu-points-card {
    width: 100%;
    min-height: 46px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    margin: 0 0 18px;
    padding: 10px 16px;

    box-sizing: border-box;

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

    border-top: 0;

    border-radius: 0 0 18px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.10),
            rgba(238, 143, 202, 0.11)
        );

    color: var(--app-text);

    text-decoration: none;
    outline: none;
}

.menu-points-card-label {
    font-size: 11px;
    font-weight: 700;
    opacity: 0.72;
}

.menu-points-card-value {
    color: var(--app-primary);
    font-size: 14px;
    font-weight: 800;
}


/* Home: event information -> calendar spacing */
.ripue-home-event-info {
    margin-bottom: 0;
}

.ripue-home-content {
    padding-bottom: 10px;
}

@media (min-width: 900px) {
    .ripue-home-calendar {
        margin-top: 10px;
    }
}


/* RIPUE Home footer */
.ripue-home-copyright {
    padding-bottom: 2px;
}

.ripue-home-version {
    margin-top: 4px;

    font-size: 0.62rem;
    letter-spacing: 0.06em;

    opacity: 0.5;
}

.app-main > .app-bottom-space {
    height: 18px;
    min-height: 18px;
}


/* RIPUE Home Calendar weekend colors */
.ripue-calendar-weekdays .is-sunday,
.ripue-calendar-day.is-sunday .ripue-calendar-day-number {
    color: #d96a7a;
}

.ripue-calendar-weekdays .is-saturday,
.ripue-calendar-day.is-saturday .ripue-calendar-day-number {
    color: #5f78c9;
}

.ripue-calendar-day.is-sunday {
    background: rgba(217, 106, 122, 0.025);
}

.ripue-calendar-day.is-saturday {
    background: rgba(95, 120, 201, 0.025);
}


/* RIPUE Home Calendar holiday colors */
.ripue-calendar-day.is-holiday .ripue-calendar-day-number {
    color: #d96a7a;
}

.ripue-calendar-day.is-holiday {
    background: rgba(217, 106, 122, 0.045);
}

@media (max-width: 600px) {
    .ripue-home-calendar .ripue-calendar-day {
        min-height: 62px;
        padding: 5px;
    }

    .ripue-calendar-day-number {
        margin-bottom: 2px;
    }
}

/* ==========================================================
   RIPUE Calendar Detail refresh
   ========================================================== */

.calendar-view-container {
    max-width: 900px;
    padding-top: 24px;
}

.calendar-view-heading {
    margin-bottom: 18px;
}

.calendar-view-heading h1 {
    font-size: 26px;
}

.calendar-view-content {
    padding: 20px;

    border:
        1px solid rgba(127, 114, 220, 0.11);

    border-radius: 20px;

    background:
        linear-gradient(
            135deg,
            rgba(127, 114, 220, 0.035),
            rgba(238, 143, 202, 0.045)
        );

    box-shadow:
        0 8px 28px rgba(73, 62, 124, 0.035);
}

.calendar-view-date {
    display: flex;
    align-items: baseline;
    gap: 8px;

    padding-bottom: 14px;
}

.calendar-view-date-main {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.calendar-view-date-month {
    font-size: 12px;
    font-weight: 700;
}

.calendar-view-date strong {
    font-size: 24px;
    line-height: 1;
}

.calendar-view-date-weekday {
    font-size: 12px;
    font-weight: 700;
}

.calendar-view-info {
    gap: 10px;

    padding:
        14px 0 10px;
}

.calendar-view-info-item {
    min-height: 0;

    padding:
        10px 12px;

    border:
        1px solid rgba(127, 114, 220, 0.09);

    border-radius: 12px;

    background:
        rgba(255, 255, 255, 0.52);
}

.calendar-view-info-label {
    margin-bottom: 4px;

    font-size: 8px;
    font-weight: 800;

    letter-spacing: 0.12em;
}

.calendar-view-info-item strong {
    font-size: 13px;
    line-height: 1.55;
}

.calendar-view-description {
    margin-top: 6px;

    padding:
        10px 0 2px;

    color: var(--app-text);

    font-size: 12px;
    line-height: 1.75;
}

.calendar-view-action {
    display: flex;
    align-items: center;
    justify-content: space-between;

    width: 100%;

    margin-top: 14px;

    padding:
        13px 15px;

    border:
        1px solid rgba(127, 114, 220, 0.13);

    border-radius: 14px;

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

    color:
        var(--app-primary);

    font-size: 12px;
    font-weight: 700;

    text-decoration: none;

    box-sizing: border-box;
}

.calendar-view-action:hover {
    background:
        rgba(255, 255, 255, 0.9);
}

@media (max-width: 600px) {

    .calendar-view-content {
        padding: 16px;
    }

    .calendar-view-heading h1 {
        font-size: 23px;
    }

    .calendar-view-info {
        grid-template-columns: 1fr;
    }
}

/* Event apply: booth request */
.apply-booth-request {
    display: block;

    width: 100%;
    min-height: 84px;

    padding: 12px 13px;

    border:
        1px solid rgba(127,114,220,.14);

    border-radius: 13px;

    background:
        rgba(255,255,255,.86);

    color: var(--app-text);

    font: inherit;
    font-size: 12px;
    line-height: 1.65;

    resize: vertical;
    box-sizing: border-box;

    outline: none;
}

.apply-booth-request:focus {
    border-color:
        rgba(127,114,220,.42);

    box-shadow:
        0 0 0 3px rgba(127,114,220,.07);
}

.apply-booth-request::placeholder {
    color: var(--app-muted);
    opacity: .72;
}

.apply-booth-request-note {
    margin:
        6px 2px 0;

    color: var(--app-muted);

    font-size: 10px;
    line-height: 1.6;
}

/* Event apply: compact option cards */
.apply-option {
    display: flex;
    align-items: flex-start;
    gap: 7px;

    width: fit-content;
    max-width: 100%;

    margin-top: 7px;
    padding: 9px 11px;

    border:
        1px solid rgba(127,114,220,.12);

    border-radius: 12px;

    background:
        rgba(248,247,255,.58);

    box-sizing: border-box;
}

.apply-option input {
    flex: 0 0 auto;

    margin:
        2px 0 0;
}

.apply-option-title {
    font-size: 12px;
    line-height: 1.5;
}

.apply-option-detail {
    width: 100%;

    margin-top: 2px;

    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 600px) {
    .apply-option {
        width: 100%;
    }
}

/* Event apply: page width */
.apply-container {
    width: 100%;
    max-width: 900px;

    margin-left: auto;
    margin-right: auto;

    padding-left: 18px;
    padding-right: 18px;

    box-sizing: border-box;
}

@media (max-width: 600px) {
    .apply-container {
        max-width: none;
    }
}

/* =========================================
   RIPUE Support Widget
========================================= */

.ripue-support-launcher {
    position: fixed;
    right: 18px;
    bottom: 86px;
    z-index: 3200;

    width: 58px;
    height: 58px;

    border: 0;
    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            rgba(127,114,220,.96),
            rgba(238,143,202,.96)
        );

    color: #fff;

    display: grid;
    place-items: center;

    font-size: 24px;

    box-shadow:
        0 12px 30px rgba(88,76,126,.24);

    cursor: pointer;
}

.ripue-support-launcher:hover {
    transform: translateY(-1px);
}

.ripue-support-widget {
    position: fixed;
    right: 18px;
    bottom: 154px;
    z-index: 3200;

    width: min(390px, calc(100vw - 28px));
    max-height: min(640px, calc(100vh - 180px));

    display: none;
    flex-direction: column;

    overflow: hidden;

    border:
        1px solid rgba(120,110,150,.14);

    border-radius: 22px;

    background:
        rgba(255,255,255,.98);

    box-shadow:
        0 24px 70px rgba(53,44,83,.24);
}

.ripue-support-widget.is-open {
    display: flex;
}

.ripue-support-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    padding: 16px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(240,235,255,.96),
            rgba(255,235,246,.96)
        );

    border-bottom:
        1px solid rgba(120,110,150,.10);
}

.ripue-support-header-main {
    min-width: 0;
}

.ripue-support-kicker {
    margin: 0 0 3px;

    font-size: 10px;
    font-weight: 800;
    letter-spacing: .14em;

    color: #8a77b4;
}

.ripue-support-title {
    margin: 0;

    font-size: 16px;
    font-weight: 800;

    color: #342b4d;
}

.ripue-support-close {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    border: 0;
    border-radius: 50%;

    background:
        rgba(255,255,255,.8);

    color: #75698f;

    font-size: 22px;

    cursor: pointer;
}

.ripue-support-messages {
    flex: 1 1 auto;
    min-height: 280px;
    max-height: 420px;

    overflow-y: auto;

    padding: 16px;

    background:
        linear-gradient(
            180deg,
            #fcfbff 0%,
            #ffffff 100%
        );
}

.ripue-support-message {
    display: flex;
    margin-bottom: 12px;
}

.ripue-support-message.assistant {
    justify-content: flex-start;
}

.ripue-support-message.user {
    justify-content: flex-end;
}

.ripue-support-bubble {
    max-width: 82%;

    padding: 11px 13px;

    border-radius: 15px;

    white-space: pre-wrap;
    word-break: break-word;

    font-size: 13px;
    line-height: 1.7;
}

.ripue-support-message.assistant
.ripue-support-bubble {
    background:
        rgba(238,235,250,.92);

    color: #403750;

    border-bottom-left-radius: 5px;
}

.ripue-support-message.user
.ripue-support-bubble {
    background:
        linear-gradient(
            135deg,
            rgba(127,114,220,.92),
            rgba(238,143,202,.88)
        );

    color: #fff;

    border-bottom-right-radius: 5px;
}

.ripue-support-status {
    display: none;

    padding: 8px 16px 0;

    font-size: 11px;
    color: #928aa2;
}

.ripue-support-status.is-visible {
    display: block;
}

.ripue-support-form {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;

    padding: 12px;

    border-top:
        1px solid rgba(120,110,150,.10);

    background: #fff;
}

.ripue-support-input {
    min-width: 0;

    padding: 11px 12px;

    border:
        1px solid rgba(120,110,150,.18);

    border-radius: 13px;

    background: #fff;

    color: inherit;
    font: inherit;
    font-size: 13px;

    outline: none;
}

.ripue-support-send {
    min-width: 58px;

    padding: 0 14px;

    border: 0;
    border-radius: 13px;

    background:
        linear-gradient(
            135deg,
            rgba(127,114,220,.95),
            rgba(238,143,202,.95)
        );

    color: #fff;

    font: inherit;
    font-size: 12px;
    font-weight: 800;

    cursor: pointer;
}

.ripue-support-help {
    padding: 0 14px 14px;

    background: #fff;

    text-align: center;
}

.ripue-support-help a {
    color: #7566b8;

    font-size: 11px;
    font-weight: 700;

    text-decoration: none;
}

@media (max-width: 520px) {

    .ripue-support-launcher {
        right: 14px;
        bottom: 82px;
    }

    .ripue-support-widget {
        right: 14px;
        bottom: 148px;

        width: calc(100vw - 28px);
    }
}


/* iOS Safari input zoom prevention */
.ripue-support-input {
    font-size: 16px;
}


/* RIPUE Support handoff */
.ripue-support-message-content {
    max-width: 82%;
}

.ripue-support-message-content
.ripue-support-bubble {
    max-width: 100%;
}

.ripue-support-handoff {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    margin-top: 8px;
    padding: 9px 13px;

    border-radius: 12px;

    background:
        linear-gradient(
            135deg,
            rgba(127,114,220,.95),
            rgba(238,143,202,.95)
        );

    color: #fff;
    font-size: 12px;
    font-weight: 800;
    text-decoration: none;
}

.ripue-support-handoff:hover {
    opacity: .92;
}

/* RIPUE Support inline contact form */

.ripue-support-handoff {
    border: 0;
    cursor: pointer;
}

.ripue-support-contact-form {
    display: none;

    margin-top: 9px;
    padding: 11px;

    border:
        1px solid rgba(120,110,150,.12);

    border-radius: 14px;

    background:
        rgba(250,248,255,.96);
}

.ripue-support-contact-form.is-visible {
    display: grid;
    gap: 8px;
}

.ripue-support-contact-input,
.ripue-support-contact-textarea {
    width: 100%;
    box-sizing: border-box;

    padding: 10px 11px;

    border:
        1px solid rgba(120,110,150,.18);

    border-radius: 11px;

    background: #fff;
    color: inherit;

    font: inherit;
    font-size: 16px;

    outline: none;
}

.ripue-support-contact-textarea {
    min-height: 110px;
    resize: vertical;
    line-height: 1.6;
}

.ripue-support-contact-submit {
    padding: 10px 12px;

    border: 0;
    border-radius: 11px;

    background:
        linear-gradient(
            135deg,
            rgba(127,114,220,.95),
            rgba(238,143,202,.95)
        );

    color: #fff;

    font: inherit;
    font-size: 13px;
    font-weight: 800;

    cursor: pointer;
}

.ripue-support-contact-submit:disabled {
    opacity: .55;
    cursor: default;
}

.ripue-support-contact-status {
    min-height: 1em;

    font-size: 11px;
    line-height: 1.5;

    color: #8c819d;
}