/*
    An-Labo Nail Collection Styles
    anlabo.world テーマ準拠（ミントグリーン / クリーム基調）
*/

:root {
    --anlabo-bg: #fbf9f1;
    --anlabo-bg-white: #ffffff;
    --anlabo-main-green: #c2dfdc;
    --anlabo-main-green-dark: #9ccfd4;
    --anlabo-main-green-deeper: #1b8288;
    --anlabo-text: #707070;
    --anlabo-text-dark: #4a4a4a;
    --anlabo-text-light: #999999;
    --anlabo-border: #e0dad0;
    --anlabo-border-light: #eeeeee;
    --anlabo-cream: #fbf9f1;
    --anlabo-cream-dark: #f3efe4;
    --anlabo-link: #9ccfd4;
    --anlabo-link-hover: #1b8288;
    --anlabo-gradient-start: rgb(170, 215, 217);
    --anlabo-gradient-end: rgb(193, 226, 228);
    --anlabo-sample-color: 126, 199, 191;
    --anlabo-radius: 12px;
    --anlabo-radius-sm: 6px;
    --anlabo-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    --anlabo-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.1);
    --anlabo-transition: 0.2s ease;
    --sidebar-width: 240px;
}

/* ==================== Background (from anlabo.world theme) ==================== */
.anlabo-nail-bg {
    background: linear-gradient(180deg, rgba(170,215,217,1) 0%, rgba(193,226,228,1) 100%);
    background-attachment: fixed;
    min-height: 100vh;
    position: relative;
}
.anlabo-nail-bg::before {
    content: '';
    position: fixed;
    top: -40px;
    right: -40px;
    width: 500px;
    height: 500px;
    background: url('/wp-content/themes/an-labo/images/manual_background_topright.png') no-repeat;
    background-size: contain;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}
.anlabo-nail-bg::after {
    content: '';
    position: fixed;
    bottom: -40px;
    left: -40px;
    width: 500px;
    height: 500px;
    background: url('/wp-content/themes/an-labo/images/manual_background_bottomleft.png') no-repeat;
    background-size: contain;
    opacity: 0.3;
    pointer-events: none;
    z-index: 0;
}

.anlabo-nail-archive,
.anlabo-nail-single {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
    font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
    color: var(--anlabo-text);
    line-height: 1.8;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 1;
}

/* Single page: dominant color background (outside the white container) */
.anlabo-nail-single .nail-product-container ~ *,
body:has(.anlabo-nail-single) .anlabo-nail-bg {
    --dc: var(--dominant-color, #c2dfdc);
    background: linear-gradient(180deg, rgba(170,215,217,1) 0%, rgba(193,226,228,1) 100%);
    background: linear-gradient(
        180deg,
        color-mix(in srgb, var(--dc) 50%, rgb(170,215,217)) 0%,
        color-mix(in srgb, var(--dc) 30%, rgb(193,226,228)) 100%
    );
    background-attachment: fixed;
    position: relative;
    transition: background 1s ease;
}

/* Floating dominant color orbs */
.dominant-orb {
    position: fixed !important;
    pointer-events: none !important;
    border-radius: 50% !important;
    z-index: 0 !important;
    transition: opacity 1.2s ease, transform 1.2s ease;
}
.dominant-orb.fading-out {
    opacity: 0 !important;
    transform: scale(0.5) !important;
}
.dominant-orb.fading-in {
    opacity: 0;
    transform: scale(0.5);
}
@keyframes orbFloat1 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    25% { transform: translate(-30px, 40px) scale(1.05); }
    50% { transform: translate(-60px, -20px) scale(0.95); }
    75% { transform: translate(-20px, -50px) scale(1.02); }
}
@keyframes orbFloat2 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(40px, -30px) scale(1.08); }
    66% { transform: translate(20px, 50px) scale(0.92); }
}
@keyframes orbFloat3 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    20% { transform: translate(50px, 20px) scale(1.06); }
    50% { transform: translate(-20px, 60px) scale(0.94); }
    80% { transform: translate(30px, -40px) scale(1.03); }
}
@keyframes orbFloat4 {
    0%, 100% { transform: translate(0, 0) scale(1); }
    40% { transform: translate(-40px, -20px) scale(1.1); }
    70% { transform: translate(60px, 30px) scale(0.9); }
}

/* ==================== Effects ==================== */
.effect-particle {
    position: fixed;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    object-fit: contain;
}
.effect-snow {
    animation: effectFallSlow linear infinite;
    filter: drop-shadow(0 0 2px rgba(200,220,255,0.4));
}
.effect-rain {
    animation: effectFallFast linear infinite;
}
.effect-star {
    filter: drop-shadow(0 0 4px rgba(255,255,200,0.6));
    animation: effectShootingStar linear infinite;
}
@keyframes effectFallSlow {
    0% { transform: translateY(-20px) translateX(0); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.6; }
    100% { transform: translateY(100vh) translateX(20px); opacity: 0; }
}
@keyframes effectFallFast {
    0% { transform: translateY(-20px); opacity: 0; }
    5% { opacity: 0.5; }
    95% { opacity: 0.3; }
    100% { transform: translateY(100vh); opacity: 0; }
}
@keyframes effectShootingStar {
    0% { transform: translate(0, 0) scale(0.5); opacity: 0; }
    5% { opacity: 1; }
    30% { opacity: 0.8; }
    100% { transform: translate(-200px, 300px) scale(0.1); opacity: 0; }
}

/* Mahojin (magic circle) */
.mahojin-wrapper {
    position: fixed;
    bottom: 5%;
    right: 5%;
    width: 300px;
    height: 300px;
    z-index: 2;
    pointer-events: auto;
    cursor: pointer;
    opacity: 0.55;
    transition: opacity 0.5s ease;
}
.mahojin-wrapper.charging {
    z-index: 9998;
}
/* White flash overlay (excludes center content area) */
.mahojin-flash {
    position: fixed;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 20%, rgba(255,255,255,0.95) 50%, #fff 70%);
    z-index: 9997;
    opacity: 0;
    pointer-events: none;
    transition: opacity 1.5s ease;
}
.mahojin-flash.active {
    opacity: 1;
    transition: opacity 1.2s ease;
}
.mahojin-flash.fading {
    opacity: 0;
    transition: opacity 4s ease;
}
.mahojin {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.mahojin-L {
    animation: mahojinSpinL 30s linear infinite;
}
.mahojin-R {
    animation: mahojinSpinR 25s linear infinite;
}
/* LILITH glow */
.mahojin-wrapper.lilith .mahojin-L {
    animation: mahojinSpinL 30s linear infinite, mahojinGlowL 4s ease-in-out infinite;
}
.mahojin-wrapper.lilith .mahojin-R {
    animation: mahojinSpinR 25s linear infinite, mahojinGlowR 5.5s ease-in-out infinite;
}
@keyframes mahojinSpinL {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}
@keyframes mahojinSpinR {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
@keyframes mahojinGlowL {
    0%, 100% { filter: drop-shadow(0 0 0px transparent); }
    50% { filter: drop-shadow(0 0 25px rgba(160, 80, 220, 0.8)) drop-shadow(0 0 50px rgba(140, 60, 200, 0.4)); }
}
@keyframes mahojinGlowR {
    0%, 100% { filter: drop-shadow(0 0 0px transparent); }
    50% { filter: drop-shadow(0 0 30px rgba(180, 100, 255, 0.7)) drop-shadow(0 0 60px rgba(160, 80, 240, 0.3)); }
}

/* Color variation selected state */
.color-var-clickable {
    transition: var(--anlabo-transition);
    border-radius: var(--anlabo-radius-sm);
}
.color-var-clickable .color-img img {
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.3)) drop-shadow(0 1px 3px rgba(0,0,0,0.15));
    border-radius: var(--anlabo-radius-sm);
}
.color-var-clickable:hover {
    transform: translateY(-3px);
}
.color-var-clickable:hover .color-img img {
    filter: drop-shadow(0 8px 10px rgba(0,0,0,0.35)) drop-shadow(0 2px 4px rgba(0,0,0,0.2));
}
.cv-selected {
    outline: 2px solid var(--anlabo-main-green-deeper);
    outline-offset: 2px;
    border-radius: var(--anlabo-radius-sm);
    position: relative;
}
.cv-selected .color-img::after {
    content: '✓';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
    font-size: 1.6rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    border-radius: inherit;
}
.cv-selected .color-img {
    position: relative;
}
/* Archive page bg */
.anlabo-nail-bg {
    background: linear-gradient(180deg, rgba(170,215,217,1) 0%, rgba(193,226,228,1) 100%);
}
/* Override theme footer bg on nail pages */
body:has(.anlabo-nail-bg) .footer,
body:has(.anlabo-nail-bg) .footer-info {
    background-color: transparent;
}

/* ==================== Header ==================== */
.anlabo-nail-header {
    text-align: center;
    margin-bottom: 30px;
    padding: 28px 20px 20px;
}
.anlabo-nail-header-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-bottom: 6px;
}
.anlabo-nail-title {
    font-size: 1.8rem;
    font-weight: 600;
    margin: 0;
    color: var(--anlabo-text-dark);
    letter-spacing: 0.1em;
}
.anlabo-nail-desc {
    color: var(--anlabo-text);
    font-size: 0.9rem;
    margin-bottom: 12px;
}

/* Language Toggle */
.lang-toggle {
    display: inline-flex;
    border: 1px solid var(--anlabo-border);
    border-radius: 16px;
    overflow: hidden;
    font-size: 0.75rem;
    background: var(--anlabo-bg-white);
    cursor: pointer;
}
.lang-toggle button {
    border: none;
    background: none;
    padding: 5px 14px;
    cursor: pointer;
    color: var(--anlabo-text);
    font-weight: 600;
    transition: var(--anlabo-transition);
    font-size: 0.75rem;
    margin: 0;
}
.lang-toggle button.active {
    background: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
}

/* ==================== Gacha Bar ==================== */
.gacha-bar {
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    margin-bottom: 20px;
    overflow: hidden;
    animation: gachaSlideIn 0.4s ease;
}
@keyframes gachaSlideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}
.gacha-bar-inner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 18px;
}
.gacha-result {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: inherit;
    flex: 1;
    min-width: 0;
    transition: var(--anlabo-transition);
}
.gacha-result:hover {
    opacity: 0.8;
}
.gacha-thumb {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    background: var(--anlabo-cream-dark);
    overflow: hidden;
    flex-shrink: 0;
}
.gacha-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gacha-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.gacha-label {
    font-size: 0.65rem;
    color: var(--anlabo-text-light);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.gacha-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--anlabo-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gacha-reroll {
    background: var(--anlabo-main-green);
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    cursor: pointer;
    transition: var(--anlabo-transition);
    white-space: nowrap;
}
.gacha-reroll:hover {
    background: var(--anlabo-main-green-dark);
    transform: translateY(-1px);
}
.gacha-close {
    background: none;
    border: none;
    color: var(--anlabo-text-light);
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    transition: var(--anlabo-transition);
}
.gacha-close:hover {
    color: var(--anlabo-text-dark);
}

/* Gacha mode on single page */
.gacha-single-banner {
    background: linear-gradient(135deg, var(--anlabo-main-green), var(--anlabo-main-green-deeper));
    border-radius: var(--anlabo-radius);
    padding: 14px 20px;
    margin-bottom: 20px;
    animation: gachaSlideIn 0.5s ease;
}
.gacha-single-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.gacha-single-label {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.1em;
}
.gacha-single-reroll {
    background: rgba(255,255,255,0.9);
    border: none;
    border-radius: 20px;
    padding: 8px 20px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--anlabo-main-green-deeper);
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.gacha-single-reroll:hover {
    background: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Header Action Buttons */
.anlabo-nail-header-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 8px;
}
.header-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--anlabo-text);
    cursor: pointer;
    transition: var(--anlabo-transition);
    text-decoration: none;
    line-height: 1.4;
}
.header-action-btn:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
}
.header-action-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Random Button (legacy compat) */
.random-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 20px;
    padding: 6px 16px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--anlabo-main-green-deeper);
    cursor: pointer;
    transition: var(--anlabo-transition);
    text-decoration: none;
}
.random-btn:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
    transform: translateY(-1px);
}
.random-btn svg {
    width: 16px;
    height: 16px;
}

/* ==================== Layout: Sidebar + Grid ==================== */
.anlabo-nail-layout {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* ==================== Filter / Sidebar ==================== */
.anlabo-nail-filter-form {
    background: var(--anlabo-bg-white);
    padding: 16px 18px;
    border-radius: var(--anlabo-radius);
    box-shadow: var(--anlabo-shadow);
    display: flex;
    flex-direction: column;
    gap: 12px;
    text-align: left;
    width: var(--sidebar-width);
    min-width: var(--sidebar-width);
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
}
/* thin scrollbar for sidebar */
.anlabo-nail-filter-form::-webkit-scrollbar { width: 4px; }
.anlabo-nail-filter-form::-webkit-scrollbar-thumb { background: var(--anlabo-main-green); border-radius: 2px; }

.filter-group {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.filter-group > label:first-child {
    font-weight: 600;
    font-size: 0.78rem;
    color: var(--anlabo-text-dark);
    width: 100%;
    margin-bottom: 2px;
    padding-bottom: 2px;
    border-bottom: 1px solid var(--anlabo-border-light);
}
.filter-group input[type="text"] {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--anlabo-border);
    border-radius: var(--anlabo-radius-sm);
    font-size: 0.85rem;
    background: var(--anlabo-cream);
    color: var(--anlabo-text-dark);
    transition: var(--anlabo-transition);
}
.filter-group input[type="text"]:focus {
    outline: none;
    border-color: var(--anlabo-main-green-dark);
    box-shadow: 0 0 0 3px rgba(156, 207, 212, 0.2);
}
.checkbox-label {
    font-weight: normal !important;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    cursor: pointer;
    background: var(--anlabo-cream);
    padding: 3px 8px;
    border-radius: 14px;
    font-size: 0.73rem !important;
    border: 1px solid var(--anlabo-border-light);
    transition: var(--anlabo-transition);
    color: var(--anlabo-text);
}
.checkbox-label input[type="checkbox"] {
    width: 12px;
    height: 12px;
    margin: 0;
}
.checkbox-label:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
}
.checkbox-label:has(input:checked) {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green-dark);
    color: var(--anlabo-text-dark);
    font-weight: 600 !important;
}
.filter-submit-btn {
    background: var(--anlabo-main-green-deeper);
    color: #fff;
    padding: 8px 20px;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    align-self: stretch;
    transition: var(--anlabo-transition);
    letter-spacing: 0.05em;
}
.filter-submit-btn:hover {
    background: #15696e;
    box-shadow: 0 4px 12px rgba(27, 130, 136, 0.3);
}
.filter-reset-btn {
    background: var(--anlabo-bg-white);
    color: var(--anlabo-text);
    padding: 6px 16px;
    border: 1px solid var(--anlabo-border);
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.8rem;
    align-self: stretch;
    transition: var(--anlabo-transition);
}
.filter-reset-btn:hover {
    background: var(--anlabo-cream-dark);
    border-color: var(--anlabo-text);
}
.results-count {
    text-align: center;
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    margin-top: 4px;
}

/* ==================== Main Content Area ==================== */
.anlabo-nail-main {
    flex: 1;
    min-width: 0;
}

/* Sort Bar */
.sort-bar {
    display: flex;
    gap: 6px;
    margin-bottom: 14px;
}
.sort-btn {
    background: none;
    border: 1px solid var(--anlabo-border-light);
    border-radius: 14px;
    padding: 3px 12px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--anlabo-text);
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.sort-btn:hover {
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
}
.sort-btn.active {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
}
.sort-btn.sort-desc::after { content: ' ↓'; }
.sort-btn.sort-asc::after { content: ' ↑'; }

/* ==================== Special Top Cards ==================== */
.special-cards {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}
.special-card {
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    box-shadow: var(--anlabo-shadow);
    border: 1px solid var(--anlabo-border-light);
    padding: 14px;
    text-align: center;
    transition: var(--anlabo-transition);
    overflow: hidden;
}
.special-card:hover {
    box-shadow: var(--anlabo-shadow-hover);
    border-color: var(--anlabo-main-green);
}
.special-card-label {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--anlabo-main-green-deeper);
    margin-bottom: 10px;
}
.special-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.special-card-thumb {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 8px;
    background: var(--anlabo-cream-dark);
    overflow: hidden;
    margin-bottom: 8px;
}
.special-card-thumb img {
    width: 102%;
    height: 102%;
    margin: -1%;
    object-fit: cover;
}
.special-card-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gacha undrawn state */
.gacha-invite {
    font-size: 2.5rem;
    margin: 20px 0 8px;
    cursor: pointer;
    transition: transform 0.3s;
}
.gacha-invite:hover {
    transform: scale(1.2) rotate(15deg);
}
.gacha-invite-text {
    font-size: 0.8rem;
    color: var(--anlabo-text);
    font-weight: 600;
}
.special-gacha {
    cursor: pointer;
}
.special-gacha-drawn { display: block; }

/* Random access card */
.special-random-btn {
    background: none;
    border: 2px dashed var(--anlabo-border);
    border-radius: 12px;
    padding: 24px 16px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 100%;
    color: var(--anlabo-main-green-deeper);
    transition: var(--anlabo-transition);
    font-weight: 600;
    font-size: 0.8rem;
}
.special-random-btn:hover {
    border-color: var(--anlabo-main-green-deeper);
    background: var(--anlabo-cream);
    transform: translateY(-2px);
}
.special-random-btn svg {
    opacity: 0.7;
}

/* Hide special cards during search/filter */
.special-cards.hidden { display: none; }

/* ==================== Grid ==================== */
.anlabo-nail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
    margin-bottom: 40px;
}

/* ==================== Card ==================== */
.nail-card {
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    overflow: hidden;
    box-shadow: var(--anlabo-shadow);
    transition: var(--anlabo-transition);
    border: 1px solid var(--anlabo-border-light);
}
.nail-card:hover {
    transform: translateY(-3px) scale(1.03);
    box-shadow: var(--anlabo-shadow-hover);
    border-color: var(--anlabo-main-green);
    z-index: 2;
}
.nail-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}
.nail-card-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    background: var(--anlabo-cream-dark);
    overflow: hidden;
}
.nail-card-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.5s ease, filter 0.5s ease;
}
.nail-card-image img.loading {
    filter: blur(10px);
    transform: scale(1.05);
}
.nail-card-image img.loaded {
    filter: blur(0);
    transform: scale(1);
}
.nail-card:hover .nail-card-image img {
    transform: none;
}
.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--anlabo-text-light);
    font-size: 0.85rem;
}
.nail-card-content {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.nail-title {
    font-size: 1.05rem;
    margin: 0 0 3px 0;
    font-weight: 600;
    color: var(--anlabo-text-dark);
}
.nail-title-en {
    display: block;
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    margin-bottom: 10px;
}

/* ==================== Tags ==================== */
.nail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.tag {
    font-size: 0.68rem;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid var(--anlabo-border-light);
    color: var(--anlabo-text);
    text-decoration: none;
}
.tag.design-tag {
    background: var(--anlabo-cream);
    border-color: var(--anlabo-border);
}
.tag.color-tag {
    background: #eef7f7;
    border-color: #d5ecec;
    color: var(--anlabo-main-green-deeper);
}
.tag.sub-tag {
    background: #f5f0fa;
    border-color: #e4d9f0;
    color: #7b5ea7;
    cursor: pointer;
    text-decoration: none;
    transition: var(--anlabo-transition);
}
.tag.sub-tag:hover {
    background: #ebe0f5;
}
.nail-sub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

.view-details-btn {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--anlabo-main-green-deeper);
    text-decoration: none;
    position: relative;
    padding-bottom: 2px;
}
.view-details-btn::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--anlabo-main-green-deeper);
    transition: var(--anlabo-transition);
}
.nail-card:hover .view-details-btn::after {
    width: 100%;
}

/* ==================== Pagination ==================== */
.anlabo-nail-pagination {
    text-align: center;
    margin-top: 30px;
}
.anlabo-nail-pagination .page-numbers {
    display: inline-block;
    padding: 6px 12px;
    margin: 0 2px;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 16px;
    color: var(--anlabo-text);
    text-decoration: none;
    font-size: 0.85rem;
    transition: var(--anlabo-transition);
}
.anlabo-nail-pagination .page-numbers.current,
.anlabo-nail-pagination .page-numbers:hover {
    background: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
    border-color: var(--anlabo-main-green);
}
.no-results {
    text-align: center;
    padding: 60px 20px;
    color: var(--anlabo-text-light);
    font-size: 1rem;
}

/* ==================== Single Page ==================== */
.single-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.back-link-btn {
    color: var(--anlabo-main-green-deeper);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    transition: var(--anlabo-transition);
}
.back-link-btn:hover { color: var(--anlabo-text-dark); }
.single-top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.nail-product-container {
    background: var(--anlabo-bg-white);
    padding: 36px;
    border-radius: var(--anlabo-radius);
    box-shadow: var(--anlabo-shadow);
}
.nail-top-section {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    margin-bottom: 40px;
}
.nail-main-image-wrapper {
    flex: 1 1 380px;
    border-radius: var(--anlabo-radius);
    overflow: hidden;
    background: var(--anlabo-cream-dark);
    box-shadow: var(--anlabo-shadow);
}
.nail-main-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 6px 10px rgba(0,0,0,0.3)) drop-shadow(0 2px 4px rgba(0,0,0,0.15));
    transition: filter 0.5s ease;
}
.no-image-large {
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anlabo-text-light);
}
.nail-info {
    flex: 1 1 360px;
}
.nail-single-title {
    font-size: 1.6rem;
    margin: 0 0 12px;
    color: var(--anlabo-text-dark);
    font-weight: 700;
}
.nail-info .nail-title-sub {
    color: var(--anlabo-text-light);
    margin-bottom: 14px;
    font-size: 0.85rem;
}
.nail-info .nail-tags { margin-bottom: 10px; }
.nail-color-dots-single { margin-bottom: 10px; }
.nail-sub-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 16px;
}
.nail-sub-tags .sub-tag {
    font-size: 0.72rem;
    padding: 2px 8px;
    background: var(--anlabo-cream);
    border: 1px solid var(--anlabo-border-light);
    border-radius: 12px;
    color: var(--anlabo-text);
    text-decoration: none;
    transition: var(--anlabo-transition);
}
.nail-sub-tags .sub-tag:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
}

/* Single Actions Column */
.nail-single-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--anlabo-border-light);
}
.nail-single-actions .single-price {
    font-size: 1.3rem;
}
.nail-single-actions .booth-btn {
    padding: 10px 24px;
    font-size: 0.95rem;
}
.actions-row-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}
.actions-row-inline .share-btn-single {
    width: 30px;
    height: 30px;
}
.actions-row-inline .puzzle-btn {
    padding: 4px 12px;
    font-size: 0.8rem;
    min-width: auto;
}
.nail-fav-btn-single {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--anlabo-border);
    background: var(--anlabo-bg-white);
    cursor: pointer;
    transition: var(--anlabo-transition);
    color: var(--anlabo-text-light);
    display: grid;
    place-items: center;
    padding: 0;
}
.nail-fav-btn-single .heart-icon { display: block; }
.nail-fav-btn-single.favorited {
    color: #e74c3c;
    border-color: #e74c3c;
    background: #fef0ef;
}
.nail-fav-btn-single.favorited .heart-icon path {
    fill: #e74c3c;
}
.share-btn-single {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid var(--anlabo-border);
    background: var(--anlabo-bg-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anlabo-text);
    text-decoration: none;
    transition: var(--anlabo-transition);
}
.share-btn-single:hover {
    background: var(--anlabo-cream-dark);
    border-color: var(--anlabo-text);
}
.nail-content {
    margin: 16px 0;
    line-height: 1.8;
}

/* Booth Button */
.booth-link-wrapper {
    margin-top: 24px;
}
.booth-btn {
    display: inline-block;
    background: linear-gradient(135deg, var(--anlabo-gradient-start), var(--anlabo-main-green-deeper));
    color: #fff;
    padding: 12px 28px;
    text-decoration: none;
    border-radius: 24px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    transition: var(--anlabo-transition);
    box-shadow: 0 4px 12px rgba(27, 130, 136, 0.2);
    letter-spacing: 0.05em;
}
.booth-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(27, 130, 136, 0.35);
    color: #fff;
}
.booth-btn-small {
    padding: 6px 14px;
    font-size: 0.78rem;
    margin-bottom: 12px;
}

/* ==================== Sections ==================== */
.nail-section {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 1px solid var(--anlabo-border-light);
}
.nail-section h2 {
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 24px;
    color: var(--anlabo-text-dark);
    letter-spacing: 0.08em;
    position: relative;
}
.nail-section h2::after {
    content: '';
    display: block;
    width: 36px;
    height: 2px;
    background: var(--anlabo-main-green);
    margin: 8px auto 0;
}

/* ==================== Color Variations ==================== */
.color-variation-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}
.color-item {
    width: 90px;
    text-align: center;
}
.color-img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--anlabo-cream-dark);
    margin: 0 auto 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    border: 2px solid var(--anlabo-border-light);
    transition: var(--anlabo-transition);
}
.color-img:hover {
    border-color: var(--anlabo-main-green);
    transform: scale(1.05);
}
.color-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.no-color-image {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 0.7rem;
    color: var(--anlabo-text-light);
}
.color-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
}

/* ==================== Child Variants ==================== */
.child-variants-section .child-variant-item {
    padding: 16px 20px;
    margin-bottom: 12px;
    background: var(--anlabo-cream);
    border-radius: var(--anlabo-radius);
    border: 1px solid var(--anlabo-border-light);
}
.child-variant-item h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: var(--anlabo-text-dark);
}
.color-variation-grid-small .color-item { width: 70px; }
.color-variation-grid-small .color-img { width: 70px; height: 70px; }
.color-variation-grid-small .color-name { font-size: 0.68rem; }

/* ==================== Wear Gallery ==================== */
.wear-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
}
.gallery-item {
    border-radius: var(--anlabo-radius);
    overflow: hidden;
    box-shadow: var(--anlabo-shadow);
    aspect-ratio: 1 / 1;
}
.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--anlabo-transition);
}
.gallery-item:hover img {
    transform: scale(1.05);
}

/* ==================== Back Link ==================== */
.back-link {
    text-align: center;
    margin-top: 40px;
}
.back-link a {
    display: inline-block;
    color: var(--anlabo-main-green-deeper);
    text-decoration: none;
    border-bottom: 1px solid var(--anlabo-main-green-dark);
    padding-bottom: 2px;
    transition: var(--anlabo-transition);
    font-weight: 600;
    font-size: 0.9rem;
}
.back-link a:hover {
    color: #15696e;
    border-color: #15696e;
}

/* ==================== Color Dots (sidebar) ==================== */
.color-dots-wrap,
.filter-color-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}
.color-dot-btn {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--anlabo-border-light);
    cursor: pointer;
    transition: var(--anlabo-transition);
    position: relative;
    padding: 0;
    outline: none;
}
.color-dot-btn:hover {
    transform: scale(1.2);
    border-color: var(--anlabo-text);
}
.color-dot-btn.selected {
    border-color: var(--anlabo-main-green-deeper);
    box-shadow: 0 0 0 2px var(--anlabo-main-green);
}
.color-dot-btn.selected::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 2px rgba(0,0,0,0.5);
}
.color-dot-btn.special {
    width: 26px;
    height: 26px;
    border-width: 2px;
}

/* ==================== Color Dots (card & single) ==================== */
.nail-color-dots,
.nail-color-dots-single {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.nail-color-dots-single { gap: 6px; }
.color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid var(--anlabo-border);
    display: inline-block;
}
.nail-color-dots-single .color-dot {
    width: 20px;
    height: 20px;
}
.color-dot-link { text-decoration: none; }

/* Individual color definitions */
.color-dot-red { background: #e74c3c; }
.color-dot-coral { background: #ff7f7f; }
.color-dot-orange { background: #f39c12; }
.color-dot-beige { background: #d4b896; }
.color-dot-yellow { background: #f1c40f; }
.color-dot-gold { background: #d4a017; border-style: dashed; }
.color-dot-green { background: #4caf50; }
.color-dot-teal { background: #009688; }
.color-dot-cyan { background: #00bcd4; }
.color-dot-blue { background: #3498db; }
.color-dot-navy { background: #1a237e; }
.color-dot-lavender { background: #b39ddb; }
.color-dot-purple { background: #9b59b6; }
.color-dot-magenta { background: #e91e63; }
.color-dot-pink { background: #f8bbd0; }
.color-dot-brown { background: #795548; }
.color-dot-white { background: #ffffff; border: 1px solid #ccc; }
.color-dot-gray { background: #9e9e9e; }
.color-dot-black { background: #2c2c2c; }
.color-dot-silver { background: #c0c0c0; border-style: dashed; }
.color-dot-transparent {
    background: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%),
                linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);
    background-size: 6px 6px;
    background-position: 0 0, 3px 3px;
    border-style: dashed;
}

/* ==================== Subtag Search UI ==================== */
.filter-group-subtag {
    position: relative;
}
.subtag-suggestions {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: var(--anlabo-radius-sm);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}
.subtag-option {
    padding: 6px 12px;
    cursor: pointer;
    font-size: 0.82rem;
    color: var(--anlabo-text-dark);
    transition: background 0.15s;
}
.subtag-option:hover {
    background: var(--anlabo-cream);
}
.subtag-option small {
    color: var(--anlabo-text-light);
    margin-left: 4px;
}
.suggest-label {
    display: inline-block;
    font-size: 0.6rem;
    padding: 1px 5px;
    border-radius: 8px;
    font-weight: 600;
    margin-right: 4px;
    vertical-align: middle;
}
.suggest-nail .suggest-label {
    background: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
}
.suggest-subtag .suggest-label {
    background: var(--anlabo-cream-dark);
    color: var(--anlabo-text);
}
.subtag-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}
.subtag-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: #eef7f7;
    color: var(--anlabo-main-green-deeper);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.73rem;
    border: 1px solid #d5ecec;
}
.subtag-remove {
    background: none;
    border: none;
    color: var(--anlabo-main-green-deeper);
    cursor: pointer;
    font-size: 0.9rem;
    line-height: 1;
    padding: 0 2px;
    opacity: 0.6;
    transition: opacity 0.15s;
}
.subtag-remove:hover {
    opacity: 1;
}

/* ==================== Similar Section ==================== */
.similar-section h2 {
    text-align: left;
    font-size: 1.1rem;
}
.similar-section h2::after {
    margin: 8px 0 0;
}
.similar-grid {
    display: flex;
    gap: 14px;
    overflow-x: auto;
    padding-bottom: 8px;
    scroll-snap-type: x mandatory;
}
.similar-grid::-webkit-scrollbar { height: 4px; }
.similar-grid::-webkit-scrollbar-thumb { background: var(--anlabo-main-green); border-radius: 2px; }
.similar-card {
    flex: 0 0 160px;
    scroll-snap-align: start;
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    overflow: hidden;
    box-shadow: var(--anlabo-shadow);
    border: 1px solid var(--anlabo-border-light);
    transition: var(--anlabo-transition);
    text-decoration: none;
    color: inherit;
    display: block;
}
.similar-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--anlabo-shadow-hover);
    border-color: var(--anlabo-main-green);
}
.similar-card-img {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--anlabo-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anlabo-text-light);
    font-size: 0.75rem;
}
.similar-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.similar-card-body {
    padding: 8px 10px 10px;
}
.similar-card-body .nail-title {
    font-size: 0.8rem;
    margin: 0 0 2px;
}
.similar-card-body .match-info {
    font-size: 0.68rem;
    color: var(--anlabo-text-light);
}
.similar-color-dots {
    display: flex;
    gap: 3px;
    margin-top: 4px;
}
.similar-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.1);
}

/* ==================== Color Picker ==================== */
.color-picker-wrap {
    margin-top: 6px;
}
.color-picker-toggle {
    font-size: 0.72rem;
    color: var(--anlabo-main-green-deeper);
    cursor: pointer;
    text-decoration: underline;
    background: none;
    border: none;
    padding: 0;
    font-weight: 600;
}
.color-picker-panel {
    margin-top: 8px;
    padding: 12px;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: var(--anlabo-radius-sm);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.color-picker-canvas {
    width: 100%;
    height: 160px;
    border-radius: var(--anlabo-radius-sm);
    cursor: crosshair;
    margin-bottom: 8px;
}
.color-picker-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.color-picker-swatch,
.picked-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid var(--anlabo-border);
    display: inline-block;
}
.color-picker-hex,
#picked-hex {
    font-size: 0.82rem;
    font-family: monospace;
    color: var(--anlabo-text-dark);
}
.picked-color-info {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.picked-hex-input {
    width: 80px;
    font-size: 0.8rem;
    font-family: monospace;
    padding: 4px 6px;
    border: 1px solid var(--anlabo-border);
    border-radius: var(--anlabo-radius-sm);
    color: var(--anlabo-text-dark);
    background: var(--anlabo-cream);
}
.color-picker-search-btn,
.picked-search-btn {
    width: 100%;
    background: var(--anlabo-main-green-deeper);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.color-picker-search-btn:hover {
    background: #15696e;
}

/* ==================== Daily Nail Section ==================== */
.daily-nail-section {
    margin-bottom: 24px;
    padding: 20px;
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    box-shadow: var(--anlabo-shadow);
    text-align: center;
}
.daily-nail-section h3 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    margin: 0 0 12px;
}
.daily-nail-card {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    background: var(--anlabo-cream);
    border-radius: var(--anlabo-radius);
    padding: 12px 20px;
    text-decoration: none;
    color: inherit;
    transition: var(--anlabo-transition);
    border: 1px solid var(--anlabo-border-light);
    max-width: 400px;
}
.daily-nail-card:hover {
    border-color: var(--anlabo-main-green);
    transform: translateY(-2px);
    box-shadow: var(--anlabo-shadow-hover);
}
.daily-nail-img {
    width: 80px;
    height: 80px;
    border-radius: var(--anlabo-radius-sm);
    background: var(--anlabo-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anlabo-text-light);
    font-size: 0.7rem;
    flex-shrink: 0;
}
.daily-nail-info {
    text-align: left;
}
.daily-nail-info .nail-title {
    font-size: 1rem;
    margin: 0 0 4px;
}
.daily-nail-info .nail-tags {
    margin: 0;
}
.daily-nail-reroll {
    display: inline-block;
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--anlabo-text-light);
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
    transition: var(--anlabo-transition);
}
.daily-nail-reroll:hover {
    color: var(--anlabo-main-green-deeper);
}

/* ==================== NEW Badge ==================== */
.nail-badge-new {
    position: absolute;
    top: 8px;
    left: 8px;
    background: linear-gradient(135deg, #FF6B6B, #FF8E53);
    color: #fff;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.05em;
    z-index: 2;
    box-shadow: 0 2px 6px rgba(255, 107, 107, 0.3);
}
.nail-card {
    position: relative;
}

/* ==================== Card Title Row ==================== */
.nail-card-bottom {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: auto;
    padding-top: 6px;
}
.nail-card-bottom .nail-color-dots {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
}
.nail-card-bottom .nail-card-meta {
    flex-shrink: 0;
}

/* ==================== Favorite Button (card) ==================== */
.nail-fav-btn {
    background: none;
    border: 1px solid var(--anlabo-border-light);
    border-radius: 50%;
    width: 28px;
    height: 28px;
    min-width: 28px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--anlabo-transition);
    color: var(--anlabo-text-light);
    padding: 0;
}
.nail-fav-btn .heart-icon { display: block; }
.nail-fav-btn:hover {
    border-color: #FF6B6B;
    color: #FF6B6B;
}
.nail-fav-btn.favorited {
    color: #FF6B6B;
    border-color: #FF6B6B;
    background: #fef0ef;
}
.nail-fav-btn.favorited .heart-icon path {
    fill: #FF6B6B;
}

/* ==================== Season Filter ==================== */
.filter-season-dots {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.season-btn {
    padding: 3px 10px;
    border-radius: 14px;
    border: 1px solid var(--anlabo-border-light);
    background: var(--anlabo-cream);
    font-size: 0.73rem;
    cursor: pointer;
    transition: var(--anlabo-transition);
    color: var(--anlabo-text);
}
.season-btn:hover { background: var(--anlabo-main-green); }
.season-btn.selected {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green-dark);
    font-weight: 600;
}

/* ==================== X Share Button ==================== */
.x-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #000;
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: var(--anlabo-transition);
}
.x-share-btn:hover {
    background: #333;
    color: #fff;
}
.x-share-btn svg { width: 14px; height: 14px; }

/* ==================== Footer (Avatar list) ==================== */
.anlabo-nail-footer {
    margin-top: 40px;
    padding: 24px 20px;
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    box-shadow: var(--anlabo-shadow);
    text-align: center;
}
.anlabo-nail-footer h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    margin: 0 0 10px;
}
.avatar-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
}
.avatar-list .tag {
    font-size: 0.72rem;
}
.avatar-show-all {
    display: inline-block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--anlabo-main-green-deeper);
    cursor: pointer;
    background: none;
    border: none;
    text-decoration: underline;
}
.avatar-list-hidden { display: none; }
.avatar-list-hidden.show { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 6px; }

/* ==================== Update Info ==================== */
.update-info-section {
    margin-top: 20px;
    padding: 16px 20px;
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    box-shadow: var(--anlabo-shadow);
}
.update-info-section h3 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    margin: 0 0 8px;
}
.update-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.update-list li {
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--anlabo-text);
    border-bottom: 1px solid var(--anlabo-border-light);
}
.update-list li:last-child { border-bottom: none; }
.update-date {
    color: var(--anlabo-text-light);
    font-size: 0.72rem;
    margin-right: 8px;
}

/* ==================== Cookie Banner ==================== */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(42, 42, 42, 0.95);
    color: #eee;
    padding: 16px 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
    z-index: 9999;
    font-size: 0.82rem;
    backdrop-filter: blur(8px);
    box-shadow: 0 -2px 12px rgba(0,0,0,0.2);
}
.hidden {
    display: none !important;
}
.cookie-banner.hidden {
    display: none;
}
.cookie-banner-text {
    max-width: 600px;
    line-height: 1.5;
}
.cookie-banner-text a {
    color: var(--anlabo-main-green-dark);
    text-decoration: underline;
}
.cookie-banner-btns {
    display: flex;
    gap: 8px;
}
.cookie-btn-accept {
    background: var(--anlabo-main-green-deeper);
    color: #fff;
    border: none;
    border-radius: 16px;
    padding: 8px 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.cookie-btn-accept:hover {
    background: #15696e;
}
.cookie-btn-decline {
    background: transparent;
    color: #ccc;
    border: 1px solid #666;
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 0.82rem;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.cookie-btn-decline:hover {
    border-color: #999;
    color: #fff;
}

/* ==================== Recommend / History Section ==================== */
.recommend-section {
    margin-bottom: 24px;
    padding: 16px 20px;
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    box-shadow: var(--anlabo-shadow);
}
.recommend-section h3 {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.recommend-grid {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 6px;
    scroll-snap-type: x mandatory;
}
.recommend-grid::-webkit-scrollbar { height: 3px; }
.recommend-grid::-webkit-scrollbar-thumb { background: var(--anlabo-main-green); border-radius: 2px; }
.recommend-card {
    flex: 0 0 140px;
    scroll-snap-align: start;
    background: var(--anlabo-cream);
    border-radius: var(--anlabo-radius-sm);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--anlabo-transition);
    border: 1px solid var(--anlabo-border-light);
}
.recommend-card:hover {
    border-color: var(--anlabo-main-green);
    transform: translateY(-2px);
}
.recommend-card-img {
    width: 100%;
    aspect-ratio: 1/1;
    background: var(--anlabo-cream-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--anlabo-text-light);
    font-size: 0.7rem;
}
.recommend-card-body {
    padding: 6px 8px 8px;
}
.recommend-card-body .nail-title {
    font-size: 0.75rem;
    margin: 0;
}

/* ==================== Responsive ==================== */
@media (max-width: 900px) {
    .anlabo-nail-layout {
        flex-direction: column;
    }
    .anlabo-nail-filter-form {
        width: 100%;
        min-width: 0;
        position: static;
        max-height: none;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }
    .filter-group {
        flex: 1 1 auto;
    }
    .filter-submit-btn {
        flex: 0 0 auto;
    }
}
@media (max-width: 600px) {
    .anlabo-nail-archive,
    .anlabo-nail-single {
        padding: 20px 12px;
    }
    .anlabo-nail-title {
        font-size: 1.4rem;
    }
    .nail-product-container {
        padding: 16px 14px;
    }
    .nail-top-section {
        flex-direction: column;
        gap: 20px;
    }
    .nail-info .nail-title {
        font-size: 1.3rem;
    }
    .anlabo-nail-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 12px;
    }
    .nail-card-content {
        padding: 10px 10px 12px;
    }
    .nail-title {
        font-size: 0.85rem;
    }
    .special-cards {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .special-card {
        min-height: auto;
    }
    .achievement-drawer {
        width: 100%;
        max-width: 100vw;
    }
    .achievement-popup {
        right: -100%;
        max-width: 85vw;
        bottom: 16px;
    }
    .achievement-popup.show {
        right: 12px;
    }
    .puzzle-modal {
        width: 95vw;
        padding: 16px;
    }
    .sort-bar {
        flex-wrap: wrap;
    }
}

/* ==================== Badges (NEW / SALE / FREE / ENDED / LIMITED) ==================== */
.badge {
    position: absolute;
    top: 8px;
    left: 8px;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    z-index: 3;
    line-height: 1.4;
}
.badge-new {
    background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
    color: #fff;
    top: 8px;
    left: auto;
    right: 8px;
}
.badge-free {
    background: linear-gradient(135deg, #4caf50, #66bb6a);
    color: #fff;
}
.badge-sale {
    background: linear-gradient(135deg, #ff9800, #ffb74d);
    color: #fff;
}
.badge-ended {
    background: rgba(0,0,0,0.5);
    color: #ddd;
}
.badge-limited {
    background: linear-gradient(135deg, #9c27b0, #ba68c8);
    color: #fff;
}
.nail-card-ended {
    opacity: 0.8;
}
.nail-card-ended:hover {
    opacity: 1;
}

/* ==================== Price ==================== */
.nail-price {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--anlabo-text);
}

/* ==================== Sparkle Button ==================== */
.sparkle-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 2px 4px;
    border-radius: 12px;
    transition: var(--anlabo-transition);
    font-size: 0.7rem;
    color: var(--anlabo-text-light);
}
.sparkle-btn:hover {
    background: rgba(255, 215, 0, 0.15);
    transform: scale(1.1);
}
.sparkle-btn:active {
    transform: scale(1.3);
}
.sparkle-icon {
    font-size: 0.85rem;
}
.sparkle-count {
    font-weight: 600;
    min-width: 12px;
}
.nail-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Single page sparkle */
.sparkle-btn-single {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    transition: var(--anlabo-transition);
    font-size: 0.9rem;
}
.sparkle-btn-single:hover {
    background: rgba(255, 215, 0, 0.15);
    border-color: #ffd700;
    transform: scale(1.05);
}
.sparkle-btn-single:active {
    transform: scale(1.15);
}
.sparkle-btn-single .sparkle-count {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--anlabo-text);
}

/* Sparkle particle effect */
.sparkle-particle {
    position: absolute;
    pointer-events: none;
    font-size: 0.6rem;
    animation: sparkleFloat 0.6s ease-out forwards;
    z-index: 9999;
}
@keyframes sparkleFloat {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--sx), var(--sy)) scale(0.3); }
}
/* Sparkle flash at milestones */
.sparkle-flash {
    animation: sparkleFlashLight 0.9s ease-out !important;
}
.sparkle-flash-big {
    animation: sparkleFlashBig 1.5s ease-out !important;
}
@keyframes sparkleFlashLight {
    0% { box-shadow: 0 0 0 rgba(255,215,0,0); filter: brightness(1); }
    20% { box-shadow: 0 0 30px rgba(255,215,0,0.6), 0 0 60px rgba(255,200,0,0.3), inset 0 0 20px rgba(255,215,0,0.2); filter: brightness(1.15); }
    50% { box-shadow: 0 0 15px rgba(255,215,0,0.3); filter: brightness(1.05); }
    100% { box-shadow: 0 0 0 rgba(255,215,0,0); filter: brightness(1); }
}
@keyframes sparkleFlashBig {
    0% { box-shadow: 0 0 0 rgba(255,215,0,0); transform: scale(1); filter: brightness(1); }
    15% { box-shadow: 0 0 60px rgba(255,215,0,0.8), 0 0 120px rgba(255,200,0,0.5), 0 0 200px rgba(255,180,0,0.2), inset 0 0 40px rgba(255,215,0,0.25); transform: scale(1.04); filter: brightness(1.3); }
    40% { box-shadow: 0 0 40px rgba(255,215,0,0.5), 0 0 80px rgba(255,200,0,0.25); transform: scale(1.02); filter: brightness(1.15); }
    100% { box-shadow: 0 0 0 rgba(255,215,0,0); transform: scale(1); filter: brightness(1); }
}

/* ==================== Random Access (sort bar) ==================== */
.random-access-btn {
    background: none;
    border: 1px solid var(--anlabo-border-light);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    cursor: pointer;
    font-size: 1rem;
    display: grid;
    place-items: center;
    transition: var(--anlabo-transition);
    padding: 0;
    flex-shrink: 0;
}
.random-access-btn:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    transform: rotate(180deg) scale(1.1);
}

/* ==================== Achievement Drawer ==================== */
.achievement-btn {
    background: none;
    border: 1px solid var(--anlabo-border);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    cursor: pointer;
    font-size: 1rem;
    display: grid;
    place-items: center;
    transition: var(--anlabo-transition);
    padding: 0;
}
.achievement-btn:hover {
    background: var(--anlabo-main-green);
    transform: scale(1.1);
}
.achievement-drawer {
    position: fixed;
    top: 0;
    right: -400px;
    width: 380px;
    max-width: 90vw;
    height: 100vh;
    background: var(--anlabo-bg-white);
    box-shadow: -4px 0 20px rgba(0,0,0,0.15);
    z-index: 10000;
    transition: right 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow-y: auto;
    padding: 24px;
}
.achievement-drawer:not(.hidden) {
    right: 0;
}
.achievement-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.achievement-drawer-header h2 {
    font-size: 1.2rem;
    margin: 0;
}
.achievement-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--anlabo-text);
}
.achievement-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 9999;
}
.achievement-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    border-radius: var(--anlabo-radius-sm);
    margin-bottom: 8px;
    background: var(--anlabo-cream);
    border: 1px solid var(--anlabo-border-light);
}
.achievement-item.locked {
    opacity: 0.4;
    filter: grayscale(1);
}
.achievement-item.unlocked {
    background: linear-gradient(135deg, #f0faf9, #e8f5f3);
    border-color: var(--anlabo-main-green);
}
.achievement-item.unlocked .badge-desc {
    color: var(--anlabo-main-green-deeper);
    font-style: italic;
}
.achievement-item .badge-icon {
    font-size: 1.5rem;
    min-width: 36px;
    text-align: center;
}
.achievement-item .badge-info {
    flex: 1;
}
.achievement-item .badge-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--anlabo-text-dark);
}
.achievement-item .badge-desc {
    font-size: 0.72rem;
    color: var(--anlabo-text-light);
}

/* Gacha Album */
.gacha-album-section {
    margin-top: 24px;
    border-top: 1px solid var(--anlabo-border-light);
    padding-top: 16px;
}
.gacha-album-section h3 {
    font-size: 1rem;
    margin: 0 0 10px 0;
}
.gacha-progress {
    font-size: 0.8rem;
    color: var(--anlabo-text);
    margin-bottom: 12px;
}
.gacha-album-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(50px, 1fr));
    gap: 6px;
}
.gacha-album-item {
    aspect-ratio: 1;
    border-radius: var(--anlabo-radius-sm);
    overflow: hidden;
    background: var(--anlabo-cream-dark);
}
.gacha-album-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gacha-album-item.locked {
    filter: grayscale(1) brightness(0.5);
}
.gacha-album-item {
    position: relative;
}
.album-dupe-count {
    position: absolute;
    top: 2px;
    left: 2px;
    background: rgba(255,152,0,0.85);
    color: #fff;
    font-size: 0.5rem;
    padding: 0 3px;
    border-radius: 3px;
    font-weight: 700;
    line-height: 1.3;
}
.album-puzzle-check {
    position: absolute;
    bottom: 2px;
    right: 2px;
    background: rgba(76, 175, 80, 0.85);
    color: #fff;
    font-size: 0.55rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 700;
}
.gacha-progress-bar {
    height: 6px;
    background: var(--anlabo-border-light);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.gacha-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--anlabo-main-green), var(--anlabo-main-green-dark));
    border-radius: 3px;
    transition: width 0.5s ease;
}

/* Achievement reset */
.achievement-reset-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--anlabo-border-light);
    text-align: center;
}
.achievement-reset-btn {
    background: transparent;
    border: none;
    color: var(--anlabo-text-light);
    font-size: 0.68rem;
    cursor: pointer;
    transition: var(--anlabo-transition);
    padding: 6px 12px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.achievement-reset-btn:hover {
    color: #e74c3c;
}

/* Steam-style achievement popup */
.achievement-popup {
    position: fixed;
    bottom: 24px;
    right: -400px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: linear-gradient(135deg, #1a1a2e, #16213e);
    color: #fff;
    padding: 14px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4), 0 0 30px rgba(100,200,255,0.1);
    z-index: 99999;
    transition: right 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    max-width: 340px;
    border: 1px solid rgba(100,200,255,0.2);
}
.achievement-popup.show {
    right: 24px;
}
.ach-popup-icon {
    font-size: 2rem;
    min-width: 44px;
    text-align: center;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.5));
}
.ach-popup-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: #8ecae6;
    margin-bottom: 2px;
}
.ach-popup-name {
    font-size: 0.9rem;
    font-weight: 700;
}

/* ==================== Meta Toast ==================== */
.meta-toast {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: rgba(26, 26, 46, 0.88);
    color: #e0e0e0;
    padding: 10px 20px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-style: italic;
    letter-spacing: 0.02em;
    z-index: 99998;
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.4s ease;
    pointer-events: none;
    max-width: 90vw;
    text-align: center;
    border: 1px solid rgba(156, 207, 212, 0.25);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}
.meta-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
/* ==================== Meta Whisper ==================== */
.meta-whisper {
    text-align: center;
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    font-style: italic;
    padding: 6px 0 2px;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

/* ==================== Variation Likes ==================== */
/* Variation Like Overlay (inside main image) */
.nail-main-image-wrapper {
    position: relative;
}
.var-like-overlay {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 10;
}
.var-like-btn-main {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 20px;
    padding: 5px 16px;
    cursor: pointer;
    font-size: 0.8rem;
    color: var(--anlabo-text);
    transition: var(--anlabo-transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.var-like-btn-main:hover {
    color: #e57373;
    border-color: rgba(229,115,115,0.4);
    background: rgba(255,255,255,0.92);
}
.var-like-btn-main.liked .var-like-icon {
    color: #e57373;
}
.var-like-btn-main .var-like-icon {
    font-size: 1rem;
    transition: transform 0.2s ease;
}
.var-like-btn-main:active .var-like-icon {
    transform: scale(1.4);
}
.var-like-btn-main .var-like-label {
    font-size: 0.78rem;
    color: var(--anlabo-text);
}
.var-like-btn-main .var-like-count {
    font-size: 0.7rem;
    color: var(--anlabo-text-light);
    min-width: 10px;
}
.var-like-particle {
    color: #e57373;
    font-size: 1rem;
    pointer-events: none;
    z-index: 99999;
    animation: varLikeFloat 0.7s ease-out forwards;
}
@keyframes varLikeFloat {
    0% { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-30px) scale(1.5); }
}
.color-item {
    text-align: center;
}

/* ==================== Comments ==================== */
.nail-comments-section {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--anlabo-border-light);
}
.nail-comments-section h2 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    margin-bottom: 16px;
}
.nail-comments-section .comment-list {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.nail-comments-section .comment {
    padding: 12px 16px;
    margin-bottom: 10px;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border-light);
    border-radius: var(--anlabo-radius);
}
.nail-comments-section .comment-author {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
}
.nail-comments-section .comment-meta {
    font-size: 0.65rem;
    color: var(--anlabo-text-light);
    margin-bottom: 6px;
}
.nail-comments-section .comment-content p {
    font-size: 0.82rem;
    color: var(--anlabo-text);
    line-height: 1.6;
    margin: 0;
}
.nail-comments-section .comment-respond {
    background: var(--anlabo-cream);
    padding: 16px;
    border-radius: var(--anlabo-radius);
    border: 1px solid var(--anlabo-border-light);
}
.nail-comments-section .comment-respond .comment-reply-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    margin-bottom: 10px;
}
.nail-comments-section .comment-form label {
    display: block;
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    margin-bottom: 3px;
}
.nail-comments-section .comment-form input[type="text"],
.nail-comments-section .comment-form input[type="email"],
.nail-comments-section .comment-form input[type="url"],
.nail-comments-section .comment-form textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--anlabo-border);
    border-radius: var(--anlabo-radius-sm);
    font-size: 0.82rem;
    background: var(--anlabo-bg-white);
    color: var(--anlabo-text);
    box-sizing: border-box;
    transition: border-color var(--anlabo-transition);
}
.nail-comments-section .comment-form input:focus,
.nail-comments-section .comment-form textarea:focus {
    outline: none;
    border-color: var(--anlabo-main-green-dark);
}
.nail-comments-section .comment-form textarea {
    min-height: 80px;
    resize: vertical;
}
.nail-comments-section .comment-form .form-submit input[type="submit"] {
    background: var(--anlabo-main-green-deeper);
    color: white;
    border: none;
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.nail-comments-section .comment-form .form-submit input[type="submit"]:hover {
    opacity: 0.85;
}
.nail-comments-section .comment-form p {
    margin-bottom: 10px;
}
.nail-comments-section .comment-form .comment-notes,
.nail-comments-section .comment-form .logged-in-as {
    font-size: 0.7rem;
    color: var(--anlabo-text-light);
}

/* ==================== Puzzle ==================== */
.puzzle-btn {
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 20px;
    padding: 6px 14px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: var(--anlabo-transition);
}
.puzzle-btn:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
}
.puzzle-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--anlabo-bg-white);
    border-radius: var(--anlabo-radius);
    padding: 24px;
    z-index: 10001;
    box-shadow: 0 8px 40px rgba(0,0,0,0.2);
    max-width: 400px;
    width: 90vw;
}
.puzzle-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 10000;
}
.puzzle-close {
    position: absolute;
    top: 10px;
    right: 14px;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
}
.puzzle-board {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    margin: 16px 0;
    aspect-ratio: 1;
    border-radius: var(--anlabo-radius-sm);
    overflow: hidden;
}
.puzzle-tile {
    background-size: 300% 300%;
    cursor: pointer;
    transition: transform 0.15s ease;
    aspect-ratio: 1;
}
.puzzle-tile.empty {
    background: var(--anlabo-cream-dark) !important;
    cursor: default;
}
.puzzle-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.puzzle-shuffle {
    background: var(--anlabo-main-green);
    border: none;
    border-radius: 14px;
    padding: 4px 14px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.puzzle-shuffle:hover {
    background: var(--anlabo-main-green-dark);
}
.puzzle-moves {
    font-size: 0.8rem;
    color: var(--anlabo-text-light);
}
.puzzle-complete {
    text-align: center;
    margin-top: 12px;
}
.puzzle-result {
    font-size: 0.85rem;
    color: var(--anlabo-text);
    margin: 4px 0 8px;
}
.puzzle-share-btn {
    display: inline-block;
    background: #1da1f2;
    color: #fff;
    border-radius: 14px;
    padding: 4px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--anlabo-transition);
}
.puzzle-share-btn:hover {
    background: #0d8bd9;
}

/* ==================== Footer ==================== */
/* Lazy load cards */
.nail-card.lazy-hidden {
    display: none !important;
}
/* Status filter buttons */
.status-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.status-btn {
    font-size: 0.68rem;
    padding: 2px 8px;
    border-radius: 10px;
    border: 1px solid var(--anlabo-border-light);
    background: none;
    color: var(--anlabo-text);
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.status-btn:hover {
    border-color: var(--anlabo-main-green);
}
.status-btn.selected {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
}

.load-more-btn {
    display: block;
    margin: 24px auto;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 20px;
    padding: 10px 32px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--anlabo-main-green-deeper);
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.load-more-btn:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-text-dark);
    transform: translateY(-1px);
}

/* Image nav arrows */
.nail-main-image-wrapper {
    position: relative;
}
.img-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 3;
    transition: var(--anlabo-transition);
    color: var(--anlabo-text);
    display: grid;
    place-items: center;
    opacity: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.img-nav svg { width: 18px; height: 18px; }
.nail-main-image-wrapper:hover .img-nav {
    opacity: 1;
}
.img-nav:hover {
    background: #fff;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    transform: translateY(-50%) scale(1.08);
}
.img-nav-prev { left: 10px; }
.img-nav-next { right: 10px; }

/* MV Pager */
.mv-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 14px;
}
.mv-pager-btn {
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 50%;
    width: 34px;
    height: 34px;
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: var(--anlabo-transition);
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.mv-pager-btn svg { width: 14px; height: 14px; }
.mv-pager-btn:hover:not(:disabled) {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.mv-pager-btn:disabled {
    opacity: 0.25;
    cursor: default;
}
.mv-pager-info {
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    min-width: 40px;
    text-align: center;
}

.nail-lab-footer {
    text-align: center;
    padding: 20px;
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
}

/* ==================== HOT card ==================== */
/* Sparkle on special cards */
.special-card {
    position: relative;
}
.special-card .special-sparkle {
    position: absolute;
    bottom: 6px;
    right: 6px;
}

/* Gacha reroll on top page */
.gacha-reroll-top {
    display: inline-block;
    background: var(--anlabo-bg-white);
    border: 1px solid var(--anlabo-border);
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 0.6rem;
    font-weight: 600;
    color: var(--anlabo-main-green-deeper);
    cursor: pointer;
    transition: var(--anlabo-transition);
    white-space: nowrap;
    margin-left: 6px;
    vertical-align: middle;
}
.gacha-reroll-top:hover {
    background: var(--anlabo-main-green);
    border-color: var(--anlabo-main-green);
}

.special-hot .special-card-label {
    background: linear-gradient(135deg, #ff6b35, #ff8f00);
    color: #fff;
}

/* ==================== Background Category Animations ==================== */
@keyframes starTwinkle {
    0%, 100% { opacity: 0.2; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.3); }
}
@keyframes kasumiFloat {
    0% { transform: translateX(-15%) scaleY(1) scaleX(1); opacity: 0.6; }
    25% { transform: translateX(5%) scaleY(1.3) scaleX(1.05); opacity: 0.8; }
    50% { transform: translateX(10%) scaleY(0.9) scaleX(0.98); opacity: 0.7; }
    75% { transform: translateX(-5%) scaleY(1.2) scaleX(1.02); opacity: 0.75; }
    100% { transform: translateX(-15%) scaleY(1) scaleX(1); opacity: 0.6; }
}
@keyframes snowFall {
    0% { transform: translateY(-20px) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    90% { opacity: 0.4; }
    100% { transform: translateY(105vh) rotate(360deg); opacity: 0; }
}
@keyframes matShootingStar {
    0% { transform: translate(0, 0) scale(1); opacity: 0; }
    3% { opacity: 1; }
    30% { opacity: 0.9; }
    100% { transform: translate(-10vw, 85vh) scale(0.1); opacity: 0; }
}
@keyframes matSnowDrift {
    0% { transform: translate(0, -10px) rotate(0deg); opacity: 0; }
    5% { opacity: 0.9; }
    15% { transform: translate(var(--drift), 15vh) rotate(54deg); }
    30% { transform: translate(calc(var(--drift) * -0.8), 30vh) rotate(108deg); opacity: 0.8; }
    45% { transform: translate(var(--drift), 45vh) rotate(162deg); }
    60% { transform: translate(calc(var(--drift) * -0.6), 60vh) rotate(216deg); opacity: 0.6; }
    75% { transform: translate(var(--drift), 75vh) rotate(270deg); }
    90% { transform: translate(calc(var(--drift) * -0.4), 90vh) rotate(324deg); opacity: 0.3; }
    100% { transform: translate(var(--drift), 105vh) rotate(360deg); opacity: 0; }
}
@keyframes matStarFall {
    0% { transform: translate(0, -20px) rotate(-20deg); opacity: 0; }
    3% { opacity: 0.95; }
    90% { opacity: 0.7; }
    100% { transform: translate(-15vw, 105vh) rotate(-20deg); opacity: 0; }
}
@keyframes matRainFall {
    0% { transform: translateY(-20px); opacity: 0; }
    3% { opacity: 0.7; }
    90% { opacity: 0.5; }
    100% { transform: translateY(105vh); opacity: 0; }
}
@keyframes bubbleRise {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.6; }
    80% { opacity: 0.3; }
    100% { transform: translateY(-110vh) scale(0.6); opacity: 0; }
}
@keyframes confettiFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.8; }
    100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}
@keyframes heartFloat {
    0% { transform: translateY(0) scale(1); opacity: 0; }
    10% { opacity: 0.5; }
    50% { transform: translateY(-50vh) scale(1.1) translateX(20px); opacity: 0.4; }
    100% { transform: translateY(-110vh) scale(0.8) translateX(-10px); opacity: 0; }
}
@keyframes heartPulse {
    0%, 100% { transform: scale(1) translateY(0); opacity: 0.25; }
    25% { transform: scale(1.15) translateY(-8px); opacity: 0.45; }
    50% { transform: scale(0.95) translateY(4px); opacity: 0.3; }
    75% { transform: scale(1.1) translateY(-5px) rotate(5deg); opacity: 0.4; }
}
@keyframes gothicFog {
    0%, 100% { opacity: 0.15; transform: scaleX(1); }
    30% { opacity: 0.35; transform: scaleX(1.2); }
    70% { opacity: 0.2; transform: scaleX(0.9); }
}
@keyframes petalFall {
    0% { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
    10% { opacity: 0.5; }
    50% { transform: translateY(50vh) rotate(180deg) translateX(30px); }
    100% { transform: translateY(110vh) rotate(360deg) translateX(-20px); opacity: 0; }
}
@keyframes shimmerWave {
    0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.3; }
    25% { transform: translate(30px, -20px) scale(1.2); opacity: 0.5; }
    50% { transform: translate(-20px, 30px) scale(0.9); opacity: 0.4; }
    75% { transform: translate(10px, -10px) scale(1.1); opacity: 0.35; }
}
@keyframes watercolorSpread {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.3; }
    30% { transform: scale(1.3) rotate(5deg); opacity: 0.5; }
    60% { transform: scale(0.9) rotate(-3deg); opacity: 0.35; }
}

/* Donut bokeh (default bg) */
.dominant-orb.donut {
    background: none !important;
    border-style: solid;
    border-width: 30px;
    opacity: 0.25;
}

/* ==================== Supported Avatars Modal ==================== */
.avatar-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 10000;
}
.avatar-modal {
    position: fixed;
    z-index: 10001;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 700px;
    max-height: 80vh;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.avatar-modal.hidden, .avatar-modal-overlay.hidden { display: none; }
.avatar-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid #f0f0f0;
}
.avatar-modal-header h2 { margin: 0; font-size: 1rem; font-weight: 600; color: #4a4a4a; }
.avatar-modal-close {
    background: none; border: none; font-size: 22px;
    cursor: pointer; color: #aaa; padding: 0 4px; line-height: 1;
}
.avatar-modal-note {
    font-size: 0.82rem; color: #707070; line-height: 1.7;
    padding: 12px 20px; border-bottom: 1px solid #f0ede6;
}
.avatar-modal-note p { margin: 0 0 6px; }
.avatar-modal-note a { color: #b05a5a; }
.avatar-share-btn {
    margin-left: auto; padding: 4px 14px;
    background: #f8f6f2; border: 1px solid #e0dad0; border-radius: 14px;
    cursor: pointer; font-size: 0.72rem; color: #707070; transition: 0.15s;
}
.avatar-share-btn:hover { background: #dec1c1; color: #fff; border-color: #dec1c1; }
.avatar-modal-count {
    padding: 8px 20px; text-align: right; font-size: 0.75rem;
    color: #aaa; border-top: 1px solid #f0f0f0;
}
.avatar-modal .avatar-search-wrap { padding: 12px 20px; border-bottom: 1px solid #f5f5f5; }
.avatar-search {
    width: 100%;
    padding: 8px 14px;
    border: 1px solid #e0dad0;
    border-radius: 20px;
    font-size: 0.82rem;
    background: #fff;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.avatar-search:focus { border-color: #c9a5a5; }
.avatar-modal .avatar-list {
    flex: 1;
    overflow-y: auto;
    padding: 12px 20px;
    display: block !important;
    justify-content: unset;
}
.avatar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px;
}
.avatar-item {
    font-size: 0.8rem; padding: 4px 0;
}
.avatar-item a {
    color: #4a4a4a; text-decoration: none;
}
.avatar-item a:hover { color: #b05a5a; }
.avatar-item small { display: block; font-size: 0.68rem; color: #bbb; }
.avatar-chip {
    font-size: 0.8rem; padding: 4px 0;
    text-decoration: none; color: #4a4a4a;
    cursor: default;
}
a.avatar-chip:hover {
    color: #b05a5a; cursor: pointer;
}
.avatar-open-btn {
    background: #dec1c1 !important;
    border: none !important;
    color: #fff !important;
    border-radius: 20px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    transition: 0.2s;
}
.avatar-open-btn:hover {
    background: #b05a5a !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(0,0,0,0.12);
}

/* ==================== Sale Countdown ==================== */
.sale-countdown {
    display: inline-block;
    font-size: 0.65rem;
    color: #e44;
    font-weight: 600;
    margin-left: 4px;
    white-space: nowrap;
}
.sale-countdown-single {
    background: linear-gradient(135deg, #ff4444, #ff6b6b);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: 12px;
    animation: saleGlow 2s ease-in-out infinite;
}
@keyframes saleGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(255,68,68,0.3); }
    50% { box-shadow: 0 0 16px rgba(255,68,68,0.6); }
}

/* Avatar sort bar */
.avatar-sort-bar {
    display: flex;
    gap: 6px;
    padding: 0 20px 10px;
}
.avatar-sort-btn {
    padding: 4px 14px;
    font-size: 0.75rem;
    border: 1px solid #e0dad0;
    border-radius: 14px;
    background: #f8f6f2;
    cursor: pointer;
    color: #707070;
    transition: 0.15s;
}
.avatar-sort-btn.active {
    background: #dec1c1;
    color: #fff;
    border-color: #dec1c1;
}
.avatar-shop-group {
    width: 100%;
    margin-bottom: 16px;
}
.avatar-shop-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #b05a5a;
    margin: 0 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid #f0f0f0;
}
.avatar-shop-group .avatar-chip {
    margin-bottom: 2px;
}
/* Avatar modal count */
.avatar-modal-count {
    padding: 8px 20px;
    text-align: right;
    font-size: 0.75rem;
    color: #aaa;
    border-top: 1px solid #f0f0f0;
}

/* Single page price */
.single-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #e44;
    white-space: nowrap;
}

/* Bonus note */
.bonus-note {
    padding: 8px 14px;
    background: rgba(255, 215, 0, 0.12);
    border: 1px solid rgba(255, 215, 0, 0.3);
    border-radius: 8px;
    font-size: 0.85rem;
    color: #856404;
}

/* Pre-release badge */
.badge-prerelease {
    background: linear-gradient(135deg, #6c5ce7, #a29bfe);
    color: white;
}

/* ==================== Diagnostic ==================== */

/* Special card: 4-column grid */
.special-cards {
    grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Diagnostic special card */
.special-diagnostic {
    background: linear-gradient(135deg, #f8f0ff, #e8f4f8);
    cursor: pointer;
}
.diagnostic-card-icon {
    font-size: 2rem;
    margin: 8px 0 4px;
}
.diagnostic-card-text {
    font-size: 0.75rem;
    color: var(--anlabo-text);
    display: block;
    margin-bottom: 8px;
    line-height: 1.4;
}
.diagnostic-start-btn {
    background: var(--anlabo-main-green-deeper);
    color: white;
    border: none;
    border-radius: 16px;
    padding: 6px 18px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.diagnostic-start-btn:hover {
    opacity: 0.85;
    transform: translateY(-1px);
}
.diagnostic-card-code {
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: var(--anlabo-main-green-deeper);
    margin: 8px 0 4px;
    font-family: 'Courier New', monospace;
}
.diagnostic-card-type {
    font-size: 0.75rem;
    color: var(--anlabo-text);
    margin-bottom: 8px;
}
.diagnostic-card-actions {
    display: flex;
    gap: 6px;
    justify-content: center;
    flex-wrap: wrap;
}
.diagnostic-redo-btn, .diagnostic-compat-btn {
    background: none;
    border: 1px solid var(--anlabo-border);
    border-radius: 12px;
    padding: 4px 10px;
    font-size: 0.7rem;
    cursor: pointer;
    transition: var(--anlabo-transition);
    color: var(--anlabo-text-dark);
}
.diagnostic-redo-btn:hover, .diagnostic-compat-btn:hover {
    border-color: var(--anlabo-main-green-deeper);
    color: var(--anlabo-main-green-deeper);
}

/* Diagnostic modal */
.diagnostic-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 9998;
    backdrop-filter: blur(2px);
}
.diagnostic-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: var(--anlabo-bg-white);
    border-radius: 16px;
    z-index: 9999;
    width: 90vw;
    max-width: 520px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 16px 48px rgba(0,0,0,0.15);
    overflow: hidden;
}
.diagnostic-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px 12px;
    border-bottom: 1px solid var(--anlabo-border-light);
}
.diagnostic-modal-header h2 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--anlabo-text-dark);
    margin: 0;
}
.diagnostic-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--anlabo-text-light);
    padding: 0 4px;
    line-height: 1;
}
.diagnostic-close:hover {
    color: var(--anlabo-text-dark);
}

/* Progress bar */
.diagnostic-progress {
    padding: 8px 20px 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.diagnostic-progress-bar {
    flex: 1;
    height: 6px;
    background: var(--anlabo-cream-dark);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.diagnostic-progress-bar::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: var(--progress, 0%);
    background: linear-gradient(90deg, var(--anlabo-main-green), var(--anlabo-main-green-deeper));
    border-radius: 3px;
    transition: width 0.4s ease;
}
.diagnostic-progress-text {
    font-size: 0.7rem;
    color: var(--anlabo-text-light);
    white-space: nowrap;
    min-width: 60px;
}

/* Body */
.diagnostic-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
}
.diagnostic-body > * {
    animation: diagFadeIn 0.15s ease;
}
@keyframes diagFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}
.diagnostic-modal, .diagnostic-overlay {
    transition: opacity 0.15s ease;
}
.diagnostic-modal.hidden, .diagnostic-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Question */
.diagnostic-question {
    text-align: center;
}
.diagnostic-question-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    margin-bottom: 16px;
}
.diagnostic-question-sub {
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    margin-top: -10px;
    margin-bottom: 14px;
}

/* Color group cards (Q1) */
.diagnostic-colorgroup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px 0;
}
.diagnostic-colorgroup-card {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 2px solid var(--anlabo-border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--anlabo-transition);
    background: var(--anlabo-cream);
}
.diagnostic-colorgroup-card:hover {
    border-color: var(--anlabo-main-green);
    background: white;
}
.diagnostic-colorgroup-card.selected {
    border-color: var(--anlabo-main-green-deeper);
    background: rgba(27,130,136,0.08);
}
.diagnostic-colorgroup-swatch {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.08);
}
.diagnostic-colorgroup-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
    line-height: 1.3;
}

/* Taste cards (Q2) */
.diagnostic-taste-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.diagnostic-taste-card {
    padding: 14px 10px;
    border: 2px solid var(--anlabo-border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--anlabo-transition);
    text-align: center;
    background: var(--anlabo-cream);
}
.diagnostic-taste-card:hover {
    border-color: var(--anlabo-main-green);
    background: white;
}
.diagnostic-taste-card.selected {
    border-color: var(--anlabo-main-green-deeper);
    background: rgba(27,130,136,0.08);
}
.diagnostic-taste-card-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
}
/* Rating dots */
.diagnostic-rating-dots {
    display: flex;
    gap: 3px;
    justify-content: center;
    margin-top: 6px;
    font-size: 0.6rem;
    line-height: 1;
    user-select: none;
}
.rating-dot {
    color: var(--anlabo-border);
    transition: color 0.1s;
}
.rating-dot.filled {
    color: var(--anlabo-main-green-deeper);
}

/* Motif badges (Q3) */
.diagnostic-motif-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}
.diagnostic-motif-badge {
    padding: 8px 14px;
    border: 1.5px solid var(--anlabo-border);
    border-radius: 20px;
    cursor: pointer;
    transition: var(--anlabo-transition);
    font-size: 0.85rem;
    background: var(--anlabo-cream);
    white-space: nowrap;
}
.diagnostic-motif-badge:hover {
    border-color: var(--anlabo-main-green);
    transform: translateY(-1px);
}
.diagnostic-motif-badge.selected {
    border-color: var(--anlabo-main-green-deeper);
    background: rgba(27,130,136,0.1);
    color: var(--anlabo-main-green-deeper);
    font-weight: 600;
}

/* Lifestyle options (Q4, Q5) */
.diagnostic-lifestyle-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.diagnostic-lifestyle-option {
    padding: 10px 10px 8px;
    border: 2px solid var(--anlabo-border-light);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--anlabo-transition);
    text-align: center;
    background: var(--anlabo-cream);
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.diagnostic-lifestyle-label {
    line-height: 1.3;
}

/* MBTI-style scale (Q4-Q8) */
.diagnostic-mbti-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.diagnostic-mbti-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1.5px solid var(--anlabo-border-light);
    border-radius: 12px;
    background: var(--anlabo-cream);
}
.diagnostic-mbti-label {
    flex: 1;
    font-size: 0.85rem;
    color: var(--anlabo-text-dark);
    line-height: 1.3;
    text-align: left;
}
.diagnostic-mbti-scale {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.diagnostic-scale-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--anlabo-border);
    background: white;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--anlabo-text-light);
    cursor: pointer;
    transition: all 0.1s;
    padding: 0;
    line-height: 28px;
    text-align: center;
}
.diagnostic-scale-btn:hover {
    border-color: var(--anlabo-main-green);
    color: var(--anlabo-main-green-deeper);
}
.diagnostic-scale-btn.active {
    background: var(--anlabo-main-green-deeper);
    border-color: var(--anlabo-main-green-deeper);
    color: white;
}

/* Meta comment (Undertale-style) */
.diagnostic-meta-comment {
    margin-top: 10px;
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    font-style: italic;
    text-align: center;
    letter-spacing: 0.02em;
}
.diagnostic-lifestyle-option:hover {
    border-color: var(--anlabo-main-green);
    background: white;
}
.diagnostic-lifestyle-option.selected {
    border-color: var(--anlabo-main-green-deeper);
    background: rgba(27,130,136,0.08);
    font-weight: 600;
}

/* Navigation */
.diagnostic-nav {
    padding: 12px 20px 16px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-top: 1px solid var(--anlabo-border-light);
}
.diagnostic-nav-btn {
    padding: 8px 24px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--anlabo-transition);
    border: none;
}
.diagnostic-back-btn {
    background: var(--anlabo-cream-dark);
    color: var(--anlabo-text);
}
.diagnostic-back-btn:hover {
    background: var(--anlabo-border);
}
.diagnostic-next-btn {
    background: var(--anlabo-main-green-deeper);
    color: white;
    margin-left: auto;
}
.diagnostic-next-btn:hover {
    opacity: 0.85;
}
.diagnostic-next-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Result */
.diagnostic-result {
    text-align: center;
}
.diagnostic-result-type {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--anlabo-main-green-deeper);
    margin-bottom: 4px;
}
.diagnostic-result-desc {
    font-size: 0.8rem;
    color: var(--anlabo-text);
    margin-bottom: 6px;
}
.diagnostic-result-fortune {
    font-size: 0.8rem;
    color: var(--anlabo-text);
    line-height: 1.6;
    margin: 8px 0 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #f8f0ff, #f0f8ff);
    border-radius: 10px;
    text-align: left;
}
.diagnostic-result-code {
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--anlabo-text-dark);
    background: var(--anlabo-cream-dark);
    padding: 4px 12px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    letter-spacing: 0.1em;
}
.diagnostic-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    color: var(--anlabo-text-light);
    padding: 2px;
}
.diagnostic-copy-btn:hover {
    color: var(--anlabo-main-green-deeper);
}

/* Result nail cards */
.diagnostic-result-grid {
    display: grid;
    gap: 12px;
    margin: 12px 0;
}
.diagnostic-result-card {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--anlabo-border-light);
    border-radius: 12px;
    text-align: left;
    background: white;
    transition: var(--anlabo-transition);
}
.diagnostic-result-card:hover {
    border-color: var(--anlabo-main-green);
    box-shadow: var(--anlabo-shadow);
}
.diagnostic-result-img-wrap {
    width: 140px;
    height: 140px;
}
.diagnostic-result-img-link {
    display: block;
    width: 100%;
    height: 100%;
}
.diagnostic-result-img {
    width: 140px;
    height: 140px;
    border-radius: 8px;
    object-fit: cover;
    background: var(--anlabo-cream-dark);
}
.diagnostic-result-colors {
    font-size: 0.7rem;
    color: var(--anlabo-text-light);
}
.diagnostic-result-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
}
.diagnostic-result-match {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--anlabo-main-green-deeper);
}
.diagnostic-result-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--anlabo-text-dark);
}
.diagnostic-result-price {
    font-size: 0.8rem;
    color: #e44;
    font-weight: 600;
}
.diagnostic-result-actions {
    display: flex;
    gap: 6px;
    margin-top: 2px;
}
.diagnostic-booth-btn {
    font-size: 0.7rem;
    padding: 3px 10px;
    border-radius: 10px;
    background: var(--anlabo-main-green-deeper);
    color: white;
    text-decoration: none;
    font-weight: 600;
    transition: var(--anlabo-transition);
}
.diagnostic-booth-btn:hover {
    opacity: 0.85;
}
.diagnostic-fav-btn {
    font-size: 0.8rem;
    background: none;
    border: 1px solid var(--anlabo-border);
    border-radius: 10px;
    padding: 2px 8px;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.diagnostic-fav-btn.selected {
    border-color: #e44;
    color: #e44;
}

/* Result bottom actions */
.diagnostic-result-bottom {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 16px;
}
.diagnostic-share-btn {
    background: #1da1f2;
    color: white;
    border: none;
    border-radius: 16px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--anlabo-transition);
}
.diagnostic-share-btn:hover {
    opacity: 0.85;
}

/* Compatibility */
.compat-code-input {
    font-family: 'Courier New', monospace;
    font-size: 1.2rem;
    text-align: center;
    letter-spacing: 0.2em;
    padding: 10px 16px;
    border: 2px solid var(--anlabo-border);
    border-radius: 12px;
    width: 160px;
    text-transform: uppercase;
    margin: 12px auto;
    display: block;
}
.compat-code-input:focus {
    border-color: var(--anlabo-main-green-deeper);
    outline: none;
}
.compat-input-section {
    text-align: center;
    padding: 20px 0;
}
.compat-result-section {
    text-align: center;
}
.compat-type-row {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 16px 0;
}
.compat-type-col {
    text-align: center;
}
.compat-type-label {
    font-size: 0.7rem;
    color: var(--anlabo-text-light);
}
.compat-type-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--anlabo-main-green-deeper);
}
.compat-match-title {
    font-size: 1rem;
    font-weight: 700;
    margin: 12px 0 4px;
}
.compat-common {
    font-size: 0.8rem;
    color: var(--anlabo-text);
    margin-bottom: 12px;
}

/* Responsive */
@media (max-width: 768px) {
    .special-cards {
        grid-template-columns: 1fr 1fr;
    }
    .diagnostic-modal {
        width: 95vw;
        max-height: 90vh;
    }
    .diagnostic-taste-grid,
    .diagnostic-lifestyle-grid {
        grid-template-columns: 1fr;
    }
    .diagnostic-colorgroup-grid {
        grid-template-columns: 1fr 1fr;
    }
    .diagnostic-result-card {
        grid-template-columns: 110px 1fr;
    }
    .diagnostic-result-img-wrap,
    .diagnostic-result-img {
        width: 110px;
        height: 110px;
    }
}
@media (max-width: 480px) {
    .special-cards {
        grid-template-columns: 1fr;
    }
}