:root {
    --atlas-glass: rgba(255, 255, 252, 0.62);
    --atlas-glass-soft: rgba(255, 255, 252, 0.34);
    --atlas-glass-border: rgba(255, 255, 255, 0.58);
    --atlas-stroke: rgba(38, 49, 47, 0.10);
    --atlas-shadow: 0 10px 28px rgba(15, 23, 42, 0.10);
    --atlas-ink: #29394b;
    --atlas-muted: #6f7884;
    --atlas-pink: rgba(245, 222, 224, 0.68);
    --atlas-blue: #2f6eea;
}

.refined-ui #achievement-book-modal {
    align-items: stretch !important;
    justify-content: center !important;
    padding: 0 !important;
    background: rgba(37, 49, 59, 0.16) !important;
    backdrop-filter: blur(4px) saturate(1.04);
    -webkit-backdrop-filter: blur(4px) saturate(1.04);
}

.refined-ui #achievement-book-content {
    position: relative;
    isolation: isolate;
    width: 100% !important;
    max-width: 60rem !important;
    height: 100dvh !important;
    max-height: none !important;
    overflow: hidden;
    border: 1px solid var(--atlas-glass-border);
    border-radius: 0 !important;
    color: var(--atlas-ink);
    background: linear-gradient(180deg, rgba(255, 255, 252, 0.58), rgba(255, 255, 252, 0.46)) !important;
    box-shadow: var(--atlas-shadow) !important;
    backdrop-filter: blur(19px) saturate(1.13);
    -webkit-backdrop-filter: blur(19px) saturate(1.13);
}

.refined-ui #achievement-book-content:focus,
.refined-ui #achievement-detail-content:focus { outline: none; }

.refined-ui .achievement-atlas-hero {
    position: relative;
    z-index: 3;
    flex: 0 0 auto;
    padding: calc(env(safe-area-inset-top) + 0.2rem) 0.75rem 0.38rem;
    border-bottom: 1px solid var(--atlas-stroke);
    background: rgba(255, 255, 252, 0.44);
    box-shadow: 0 5px 16px rgba(38, 49, 47, 0.035);
    backdrop-filter: blur(16px) saturate(1.12);
    -webkit-backdrop-filter: blur(16px) saturate(1.12);
}

.refined-ui .achievement-atlas-topline {
    min-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
}

.refined-ui .achievement-atlas-title {
    color: var(--atlas-ink);
    font: 850 1.625rem/1.05 "Noto Sans TC", "Inter Variable", sans-serif;
    letter-spacing: 0.015em;
}

.refined-ui .achievement-atlas-close,
.refined-ui .achievement-detail-close {
    width: 2.75rem;
    height: 2.75rem;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 50%;
    color: var(--atlas-ink);
    background: transparent;
    font-size: 1rem;
}

.refined-ui .achievement-atlas-close:hover,
.refined-ui .achievement-detail-close:hover {
    border-color: var(--atlas-glass-border);
    background: rgba(255, 255, 255, 0.34);
}

.refined-ui .achievement-atlas-summary {
    min-height: 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.3rem;
    margin-top: -0.24rem;
    padding-left: 0.04rem;
    color: var(--atlas-muted);
    font-size: 0.78rem;
    font-weight: 650;
    white-space: nowrap;
}

.refined-ui .achievement-atlas-summary strong {
    color: var(--atlas-ink);
    font-size: 0.8rem;
    font-weight: 850;
}

.refined-ui .achievement-atlas-summary i {
    color: rgba(47, 110, 234, 0.48);
    font-style: normal;
}

.refined-ui .achievement-atlas-tabs {
    width: min(100%, 20rem);
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.3rem;
    margin-top: 0.25rem;
}

.refined-ui .achievement-atlas-tab {
    min-height: 2.25rem;
    height: 2.25rem;
    padding: 0 0.55rem;
    border: 1px solid rgba(255, 255, 255, 0.54);
    border-radius: 0.68rem;
    color: #68717d;
    background: rgba(255, 255, 255, 0.22);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
    font-size: 0.82rem;
    font-weight: 750;
    line-height: 1;
    backdrop-filter: blur(10px) saturate(1.06);
    -webkit-backdrop-filter: blur(10px) saturate(1.06);
}

.refined-ui .achievement-atlas-tab[aria-selected="true"] {
    border-color: rgba(255, 255, 255, 0.74);
    color: var(--atlas-ink);
    background: var(--atlas-pink);
    box-shadow: 0 3px 9px rgba(38, 49, 47, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.refined-ui #achievement-book-list {
    position: relative;
    z-index: 1;
    display: block !important;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0.42rem 0.55rem calc(env(safe-area-inset-bottom) + 1.35rem) !important;
    overflow-x: hidden;
    overflow-y: auto;
    background: transparent !important;
    scroll-padding-top: 0.5rem;
}

.refined-ui #achievement-book-list > * {
    content-visibility: visible;
    contain-intrinsic-size: none;
}

.refined-ui .atlas-loading {
    min-height: 45vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--atlas-muted);
    text-align: center;
}

.refined-ui .atlas-loading > span {
    width: 2.75rem;
    aspect-ratio: 1;
    border: 1px solid var(--atlas-glass-border);
    border-radius: 50%;
    background: var(--atlas-glass-soft);
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: atlasLoading 1.4s ease-in-out infinite alternate;
}

.refined-ui .atlas-loading strong { margin-top: 0.55rem; color: var(--atlas-ink); font-size: 0.84rem; font-weight: 850; }
.refined-ui .atlas-loading small { margin-top: 0.18rem; font-size: 0.65rem; }

.refined-ui .atlas-region + .atlas-region,
.refined-ui .atlas-finale { margin-top: 0.75rem; }

.refined-ui .atlas-region-heading {
    min-height: 1.875rem;
    display: flex;
    align-items: center;
    gap: 0.42rem;
    margin: 0 0 0.34rem;
    border-bottom: 1px solid var(--atlas-stroke);
    background: transparent;
}

.refined-ui .atlas-region-heading h3 {
    padding: 0;
    color: var(--atlas-ink);
    background: transparent;
    font-family: "Noto Sans TC", "Inter Variable", sans-serif;
    font-size: 0.96rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.refined-ui .atlas-region-heading span {
    color: var(--atlas-muted);
    font-size: 0.7rem;
    font-weight: 750;
}

.refined-ui .atlas-panel { margin-top: 0; }
.refined-ui .atlas-section-heading { margin: 0 0 0.45rem 0.1rem; text-align: left; }

.refined-ui .atlas-section-heading h3 {
    color: var(--atlas-ink);
    font: 850 1.05rem/1.2 "Noto Sans TC", "Inter Variable", sans-serif;
}

.refined-ui .atlas-section-heading p {
    margin-top: 0.1rem;
    color: var(--atlas-muted);
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.35;
}

.refined-ui .atlas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 0.5rem;
    row-gap: 1rem;
}

.refined-ui .atlas-badge {
    position: relative;
    min-width: 0;
    min-height: 2.75rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    color: var(--atlas-ink);
    background: transparent;
    outline: none;
    text-align: center;
}

.refined-ui .atlas-badge:active { transform: scale(0.98); }

.refined-ui .atlas-badge:focus,
.refined-ui .atlas-finale-button:focus,
.refined-ui .achievement-atlas-tab:focus,
.refined-ui .achievement-atlas-close:focus,
.refined-ui .achievement-detail-close:focus,
.refined-ui .atlas-trip-list button:focus { outline: none; }

.refined-ui.atlas-keyboard-nav .atlas-badge:focus,
.refined-ui.atlas-keyboard-nav .atlas-finale-button:focus,
.refined-ui.atlas-keyboard-nav .achievement-atlas-tab:focus,
.refined-ui.atlas-keyboard-nav .achievement-atlas-close:focus,
.refined-ui.atlas-keyboard-nav .achievement-detail-close:focus,
.refined-ui.atlas-keyboard-nav .atlas-trip-list button:focus {
    outline: 2px solid var(--atlas-blue);
    outline-offset: 3px;
}

.refined-ui .atlas-artwork {
    position: relative;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
}

.refined-ui .atlas-artwork-standard { width: clamp(5.25rem, 25vw, 6.375rem); }
.refined-ui .atlas-artwork-detail { width: 9.75rem; }
.refined-ui .atlas-artwork-ultimate { width: 8.75rem; }

.refined-ui .atlas-artwork img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    opacity: 1;
    transition: filter 160ms ease, opacity 160ms ease, transform 160ms ease;
}

.refined-ui .atlas-artwork.is-earned img {
    filter: none;
    opacity: 1;
}

.refined-ui .atlas-artwork.is-locked img {
    filter: grayscale(100%) contrast(0.9) brightness(1.04);
    opacity: 0.66;
}

@media (hover: hover) {
    .refined-ui .atlas-badge:hover .atlas-artwork img { transform: translateY(-1px); }
}

.refined-ui .atlas-badge.is-earned.has-integrated-title .atlas-artwork-standard::before {
    content: '✓';
    position: absolute;
    z-index: 3;
    width: 1.05rem;
    height: 1.05rem;
    top: 4%;
    right: 3%;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 50%;
    color: #fff;
    background: rgba(219, 111, 124, 0.9);
    box-shadow: 0 2px 5px rgba(38, 49, 47, 0.11);
    font-size: 0.62rem;
    font-weight: 900;
}

.refined-ui .atlas-artwork.is-artwork-missing {
    border: 1px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.32);
    box-shadow: 0 7px 18px rgba(38, 49, 47, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.68);
    backdrop-filter: blur(12px) saturate(1.06);
    -webkit-backdrop-filter: blur(12px) saturate(1.06);
}

.refined-ui .atlas-artwork.is-artwork-missing::before {
    content: '';
    width: 42%;
    aspect-ratio: 1;
    border: 1px solid rgba(47, 110, 234, 0.1);
    border-radius: 50%;
}

.refined-ui .atlas-artwork-placeholder-text {
    position: absolute;
    z-index: 2;
    inset: 0;
    display: grid;
    place-items: center;
    color: rgba(78, 91, 105, 0.58);
    font-size: 0.6rem;
    font-weight: 750;
    letter-spacing: 0.05em;
}

.refined-ui .atlas-badge-name {
    max-width: 100%;
    margin-top: 0.25rem;
    overflow-wrap: anywhere;
    color: var(--atlas-ink);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.2;
}

.refined-ui .atlas-badge-state,
.refined-ui .atlas-badge-progress {
    margin-top: 0.12rem;
    color: var(--atlas-muted);
    font-size: 0.66rem;
    font-weight: 650;
    line-height: 1.15;
}

.refined-ui .atlas-panel .atlas-badge-progress { margin-top: 0.1rem; color: #667487; }

.refined-ui .atlas-finale {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.9rem 0 0.4rem;
    border-top: 1px solid var(--atlas-stroke);
    text-align: center;
}

.refined-ui .atlas-finale-button {
    min-height: 2.75rem;
    display: block;
    padding: 0;
    border: 0;
    border-radius: 50%;
    color: var(--atlas-ink);
    background: transparent;
}

.refined-ui .atlas-finale-copy { margin-top: 0.18rem; }
.refined-ui .atlas-finale-copy > span { display: block; color: #8b7180; font-size: 0.58rem; font-weight: 800; letter-spacing: 0.08em; }
.refined-ui .atlas-finale-copy h3 { margin-top: 0.1rem; color: var(--atlas-ink); font: 850 1rem/1.2 "Noto Sans TC", "Inter Variable", sans-serif; }
.refined-ui .atlas-finale-copy p { margin-top: 0.12rem; color: var(--atlas-muted); font-size: 0.65rem; }
.refined-ui .atlas-finale-copy strong { display: block; margin-top: 0.22rem; color: #596b82; font-size: 0.78rem; font-weight: 850; }

.refined-ui #achievement-detail-modal {
    align-items: flex-end;
    padding: 0;
    background: rgba(37, 49, 59, 0.2);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.refined-ui #achievement-detail-content {
    position: relative;
    width: 100%;
    height: auto;
    max-height: 84dvh;
    max-width: 33rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--atlas-glass-border);
    border-radius: 1.1rem 1.1rem 0 0;
    color: var(--atlas-ink);
    background: linear-gradient(180deg, rgba(255, 255, 252, 0.74), rgba(255, 255, 252, 0.58));
    box-shadow: 0 -10px 28px rgba(15, 23, 42, 0.10);
    backdrop-filter: blur(24px) saturate(1.15);
    -webkit-backdrop-filter: blur(24px) saturate(1.15);
}

.refined-ui .achievement-detail-toolbar {
    min-height: 2.75rem;
    display: flex;
    justify-content: flex-end;
    flex: 0 0 auto;
    padding: 0.14rem 0.38rem 0;
}

.refined-ui .achievement-detail-scroll {
    flex: 0 1 auto;
    min-height: 0;
    padding: 0 0.85rem calc(env(safe-area-inset-bottom) + 0.9rem);
    overflow-x: hidden;
    overflow-y: auto;
}

.refined-ui .atlas-detail-hero { text-align: center; }
.refined-ui .atlas-detail-hero .atlas-artwork { margin: -0.4rem auto 0; }

.refined-ui .atlas-detail-category {
    display: block;
    margin-top: 0.08rem;
    color: #8b7180;
    font-size: 0.62rem;
    font-weight: 750;
    letter-spacing: 0.06em;
}

.refined-ui .atlas-detail-hero h2 {
    margin-top: 0.12rem;
    color: var(--atlas-ink);
    font-size: 1.45rem;
    font-weight: 850;
    letter-spacing: 0.01em;
}

.refined-ui .atlas-detail-hero > p { margin: 0.14rem auto 0; color: var(--atlas-muted); font-size: 0.76rem; font-weight: 600; line-height: 1.4; }
.refined-ui .atlas-detail-status { margin-top: 0.12rem; color: var(--atlas-muted); font-size: 0.72rem; font-weight: 750; }
.refined-ui .atlas-detail-status.is-earned { color: #a05f6e; }
.refined-ui .atlas-detail-body { margin-top: 0.42rem; }

.refined-ui .atlas-detail-progress,
.refined-ui .atlas-detail-date,
.refined-ui .atlas-detail-section {
    padding: 0.52rem 0;
    border-top: 1px solid var(--atlas-stroke);
}

.refined-ui .atlas-detail-progress > div:first-child,
.refined-ui .atlas-detail-date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.refined-ui .atlas-detail-progress span,
.refined-ui .atlas-detail-date span { color: var(--atlas-muted); font-size: 0.75rem; font-weight: 650; }

.refined-ui .atlas-detail-progress strong,
.refined-ui .atlas-detail-date strong { color: var(--atlas-ink); font-size: 0.8rem; font-weight: 850; }

.refined-ui .atlas-progress-track {
    height: 0.22rem;
    margin-top: 0.32rem;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(47, 110, 234, 0.09);
}

.refined-ui .atlas-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #e0929b, #8ab8cf);
}

.refined-ui .atlas-detail-facts {
    min-height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0.4rem 0.3rem;
    border-top: 1px solid var(--atlas-stroke);
    color: var(--atlas-muted);
    font-size: 0.72rem;
    font-weight: 650;
    white-space: nowrap;
}

.refined-ui .atlas-detail-facts strong { color: var(--atlas-ink); font-size: 0.8rem; font-weight: 850; }
.refined-ui .atlas-detail-facts i { color: rgba(47, 110, 234, 0.38); font-style: normal; }

.refined-ui .atlas-detail-section h3 {
    margin-bottom: 0.36rem;
    color: var(--atlas-ink);
    font-size: 0.84rem;
    font-weight: 800;
}

.refined-ui .atlas-related-list { display: flex; flex-wrap: wrap; gap: 0.28rem; }

.refined-ui .atlas-related-list span {
    padding: 0.24rem 0.42rem;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 0.55rem;
    color: #596574;
    background: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
    font-size: 0.69rem;
    font-weight: 650;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.refined-ui .atlas-trip-list { display: grid; gap: 0.28rem; }

.refined-ui .atlas-trip-list button {
    min-height: 2.45rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem;
    padding: 0.42rem 0.56rem;
    border: 1px solid rgba(255, 255, 255, 0.62);
    border-radius: 0.62rem;
    color: var(--atlas-ink);
    background: rgba(255, 255, 255, 0.26);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
    text-align: left;
    font-size: 0.73rem;
    font-weight: 750;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.refined-ui .atlas-trip-list button span { flex: 0 0 auto; color: #7b6070; font-size: 0.62rem; }
.refined-ui .atlas-detail-empty { color: #858e98; font-size: 0.72rem; }

.refined-ui #achievement-container {
    top: calc(env(safe-area-inset-top) + 0.75rem) !important;
    width: min(calc(100vw - 1.5rem), 26rem) !important;
    gap: 0.5rem !important;
}

.achievement-notice {
    width: 100%;
    min-height: 4.6rem;
    display: grid;
    grid-template-columns: 3.4rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.55rem;
    padding: 0.5rem;
    border: 1px solid var(--atlas-glass-border);
    border-radius: 0.82rem;
    color: var(--atlas-ink);
    background: rgba(255, 255, 252, 0.68);
    box-shadow: var(--atlas-shadow);
    pointer-events: auto;
    backdrop-filter: blur(18px) saturate(1.12);
    -webkit-backdrop-filter: blur(18px) saturate(1.12);
    animation: achievementNoticeIn 260ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.achievement-notice.is-leaving { animation: achievementNoticeOut 180ms ease both; }
.achievement-notice-art .atlas-artwork-notice { width: 3.4rem; }
.achievement-notice-art .atlas-artwork-placeholder-text { font-size: 0.45rem; }
.achievement-notice-copy { min-width: 0; }
.achievement-notice-copy > span { color: #8b6072; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.07em; }
.achievement-notice-copy strong,
.achievement-notice-copy small { display: block; }

.achievement-notice-copy strong {
    margin-top: 0.08rem;
    overflow: hidden;
    color: var(--atlas-ink);
    font-size: 0.8rem;
    font-weight: 850;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.achievement-notice-copy small { margin-top: 0.08rem; color: var(--atlas-muted); font-size: 0.56rem; font-weight: 600; }
.achievement-notice-actions { display: grid; gap: 0.12rem; }

.achievement-notice-actions button {
    min-width: 2.5rem;
    min-height: 1.75rem;
    padding: 0 0.32rem;
    border-radius: 0.5rem;
    color: #795b6a;
    background: rgba(245, 222, 224, 0.54);
    font-size: 0.56rem;
    font-weight: 800;
}

.achievement-notice-actions button:last-child { color: #6f7884; background: transparent; }

@keyframes achievementNoticeIn {
    from { opacity: 0; transform: translateY(-0.7rem) scale(0.98); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes achievementNoticeOut {
    to { opacity: 0; transform: translateY(-0.45rem) scale(0.98); }
}

@keyframes atlasLoading {
    from { opacity: 0.45; transform: scale(0.92); }
    to { opacity: 1; transform: scale(1); }
}

@media (min-width: 600px) {
    .refined-ui #achievement-book-modal {
        align-items: center !important;
        padding: 1rem !important;
    }

    .refined-ui #achievement-book-content {
        height: calc(100dvh - 2rem) !important;
        border-radius: 1.1rem !important;
    }

    .refined-ui .achievement-atlas-hero {
        padding-right: 1rem;
        padding-left: 1rem;
    }

    .refined-ui #achievement-book-list {
        padding: 0.58rem 0.85rem 1.8rem !important;
    }

    .refined-ui .atlas-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        column-gap: 0.62rem;
        row-gap: 1.05rem;
    }

    .refined-ui .atlas-artwork-standard { width: 7rem; }

    .refined-ui #achievement-detail-modal {
        align-items: center;
        padding: 1rem;
    }

    .refined-ui #achievement-detail-content { border-radius: 1.1rem; }
}

@media (min-width: 900px) {
    .refined-ui .achievement-atlas-hero {
        padding-right: 1.25rem;
        padding-left: 1.25rem;
    }

    .refined-ui #achievement-book-list {
        padding-right: 1.25rem !important;
        padding-left: 1.25rem !important;
    }

    .refined-ui .atlas-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        column-gap: 0.75rem;
        row-gap: 1.1rem;
    }

    .refined-ui .atlas-artwork-standard { width: 7.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    .achievement-notice,
    .achievement-notice.is-leaving,
    .refined-ui .atlas-loading > span,
    .refined-ui .atlas-artwork img {
        animation: none !important;
        transition: none !important;
    }
}