/*
 * Pigtopia visual direction preview
 * Scope: login, home and travel/projects only.
 * The rest of the app intentionally keeps the existing skin until approval.
 */

body.visual-preview {
    --vp-bg: #f7f3ee;
    --vp-surface: #fffdfb;
    --vp-surface-soft: #f1ebe5;
    --vp-text: #403a36;
    --vp-muted: #7d746d;
    --vp-faint: #a59a92;
    --vp-border: #e8ded6;
    --vp-primary: #a65f57;
    --vp-primary-soft: #f2dfdb;
    --vp-rose: #c9828d;
    --vp-sage: #829b88;
    --vp-blue: #8098aa;
    --vp-lavender: #968aa8;
    --vp-butter: #c8a362;
    --vp-shadow-sm: 0 5px 18px rgba(86, 68, 58, 0.06);
    --vp-shadow-md: 0 14px 40px rgba(86, 68, 58, 0.10);
    --vp-radius: 22px;
    --vp-radius-sm: 14px;
    /* Compatibility aliases for existing modules. */
    --primary: var(--vp-primary);
    --primary-light: #d6a39c;
    --primary-bg: var(--vp-primary-soft);
    --accent: var(--vp-sage);
    --accent-light: #e7eee8;
    --success: #819987;
    --warning: #c8a362;
    --danger: #b16962;
    --bg: var(--vp-bg);
    --card: var(--vp-surface);
    --border: var(--vp-border);
    --text: var(--vp-text);
    --text-secondary: var(--vp-muted);
    --text-light: var(--vp-faint);
    --radius: var(--vp-radius);
    --radius-sm: var(--vp-radius-sm);
    --shadow: var(--vp-shadow-sm);
    --shadow-lg: var(--vp-shadow-md);
    background: var(--vp-bg);
    color: var(--vp-text);
}

body.visual-preview .btn,
body.visual-preview .app-icon,
body.visual-preview .project-card,
body.visual-preview .back-btn,
body.visual-preview .color-dot {
    -webkit-tap-highlight-color: transparent;
    transition: transform 160ms ease, box-shadow 220ms ease, background-color 180ms ease,
                border-color 180ms ease, color 180ms ease, opacity 180ms ease;
}

body.visual-preview .btn:active,
body.visual-preview .app-icon:active,
body.visual-preview .project-card:active,
body.visual-preview .back-btn:active {
    transform: translateY(1px) scale(0.965);
}

body.visual-preview .btn:focus-visible,
body.visual-preview .app-icon:focus-visible,
body.visual-preview .back-btn:focus-visible,
body.visual-preview .form-input:focus-visible {
    outline: 3px solid rgba(166, 95, 87, 0.18);
    outline-offset: 3px;
}

body.visual-preview .btn {
    min-height: 42px;
    border-radius: 13px;
    font-weight: 650;
    letter-spacing: 0.01em;
}

body.visual-preview .btn-sm {
    min-height: 36px;
}

body.visual-preview .btn-primary {
    background: var(--vp-primary);
    box-shadow: 0 8px 18px rgba(166, 95, 87, 0.18);
}

body.visual-preview .btn-primary:hover {
    background: #95534c;
}

body.visual-preview .btn-outline {
    color: var(--vp-primary);
    border-color: rgba(166, 95, 87, 0.38);
    background: rgba(255, 253, 251, 0.72);
}

body.visual-preview .btn-outline:hover {
    background: var(--vp-primary-soft);
}

body.visual-preview .form-group label {
    color: var(--vp-muted);
    font-size: 0.8rem;
    font-weight: 650;
    margin-bottom: 0.45rem;
}

body.visual-preview .form-input {
    min-height: 46px;
    border-color: var(--vp-border);
    border-radius: 14px;
    background: #faf7f3;
    color: var(--vp-text);
}

body.visual-preview .form-input::placeholder {
    color: #b0a69f;
}

body.visual-preview .form-input:focus {
    border-color: rgba(166, 95, 87, 0.62);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(166, 95, 87, 0.08);
}

/* ---------- Brand mark ---------- */
.vp-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: var(--vp-text);
}

.vp-brand-mark {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    background: var(--vp-primary-soft);
    color: var(--vp-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72);
}

.vp-brand-mark svg {
    width: 25px;
    height: 25px;
}

.vp-brand-name {
    font-size: 1rem;
    font-weight: 760;
    letter-spacing: -0.01em;
}

/* ---------- Login ---------- */
.preview-login .login-page {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(218, 184, 171, 0.48), transparent 31%),
        radial-gradient(circle at 88% 78%, rgba(157, 177, 160, 0.40), transparent 32%),
        linear-gradient(145deg, #faf6f1 0%, #f3ece5 100%);
    padding: 1.25rem;
}

.preview-login .login-page::before,
.preview-login .login-page::after {
    content: '';
    position: absolute;
    z-index: -1;
    border-radius: 999px;
    filter: blur(1px);
    opacity: 0.72;
}

.preview-login .login-page::before {
    width: 240px;
    height: 240px;
    left: -84px;
    bottom: -76px;
    background: rgba(199, 163, 98, 0.20);
}

.preview-login .login-page::after {
    width: 180px;
    height: 180px;
    right: -54px;
    top: -42px;
    background: rgba(150, 138, 168, 0.18);
}

.preview-login .login-card {
    position: relative;
    width: min(100%, 400px);
    max-width: 400px;
    margin: 0;
    padding: 2.15rem 2rem 1.8rem;
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 28px;
    background: rgba(255, 253, 251, 0.90);
    box-shadow: 0 28px 75px rgba(91, 72, 61, 0.14);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    animation: vpCardIn 520ms cubic-bezier(.2,.75,.25,1) both;
}

.preview-login .login-brand {
    text-align: center;
    margin-bottom: 1.8rem;
}

.preview-login .login-brand .vp-brand-mark {
    width: 64px;
    height: 64px;
    margin-bottom: 0.9rem;
    border-radius: 22px;
    background: linear-gradient(145deg, #f4e1dc, #eed8d3);
    box-shadow: 0 12px 26px rgba(166, 95, 87, 0.15), inset 0 1px 0 #fff;
}

.preview-login .login-brand .vp-brand-mark svg {
    width: 38px;
    height: 38px;
}

.preview-login .login-card h1 {
    color: var(--vp-text);
    font-size: 1.65rem;
    letter-spacing: -0.025em;
    margin-bottom: 0.35rem;
}

.preview-login .login-card .subtitle {
    color: var(--vp-muted);
    font-size: 0.85rem;
    line-height: 1.6;
    margin-bottom: 0;
}

.preview-login .vp-input-wrap {
    position: relative;
}

.preview-login .vp-input-wrap svg {
    position: absolute;
    left: 0.9rem;
    top: 50%;
    width: 18px;
    height: 18px;
    color: var(--vp-faint);
    transform: translateY(-50%);
    pointer-events: none;
}

.preview-login .vp-input-wrap .form-input {
    padding-left: 2.75rem;
}

.preview-login .btn-primary {
    position: relative;
    min-height: 50px;
    margin-top: 0.3rem;
    overflow: hidden;
}

.preview-login .btn-primary::after {
    content: '→';
    position: absolute;
    right: 1.1rem;
    font-size: 1.05rem;
    transition: transform 180ms ease;
}

.preview-login .btn-primary:hover::after {
    transform: translateX(3px);
}

.preview-login .btn-primary.is-loading::after {
    content: '···';
    transform: none;
    letter-spacing: 2px;
}

.preview-login .login-footnote {
    margin-top: 1.15rem;
    color: var(--vp-faint);
    font-size: 0.72rem;
    text-align: center;
}

/* ---------- Shared preview topbar ---------- */
.preview-home .topbar,
.preview-projects .topbar {
    min-height: 68px;
    padding: 0.75rem max(1rem, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(232, 222, 214, 0.72);
    background: rgba(247, 243, 238, 0.84);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

.preview-home .topbar-inner {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.preview-home .user-cluster {
    display: flex;
    align-items: center;
    gap: 0.55rem;
}

.preview-home .user-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 34px;
    padding: 0.25rem 0.65rem 0.25rem 0.3rem;
    border: 1px solid rgba(232, 222, 214, 0.84);
    border-radius: 999px;
    background: rgba(255, 253, 251, 0.75);
    color: var(--vp-muted);
    font-size: 0.76rem;
}

.preview-home .user-avatar {
    width: 26px;
    height: 26px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--vp-primary-soft);
    color: var(--vp-primary);
    font-size: 0.7rem;
    font-weight: 750;
    text-transform: uppercase;
}

.preview-home .logout-btn {
    min-width: 42px;
    width: 42px;
    padding: 0;
    border-radius: 50%;
}

.preview-home .logout-btn svg {
    width: 17px;
    height: 17px;
}

/* ---------- Home ---------- */
.preview-home .home-shell {
    max-width: 560px;
    padding: 1.2rem 1rem 2.5rem;
}

.preview-home .home-hero {
    position: relative;
    overflow: hidden;
    min-height: 96px;
    padding: 0.82rem 1.1rem;
    border: 1px solid rgba(255, 255, 255, 0.75);
    border-radius: 23px;
    background:
        radial-gradient(circle at 86% 12%, rgba(255,255,255,0.62), transparent 28%),
        linear-gradient(135deg, #ecd9d3 0%, #eee2d7 56%, #e4e9df 100%);
    box-shadow: var(--vp-shadow-md);
    animation: vpCardIn 480ms 50ms cubic-bezier(.2,.75,.25,1) both;
}

.preview-home .home-hero::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -48px;
    width: 156px;
    height: 156px;
    border: 28px solid rgba(255, 253, 251, 0.28);
    border-radius: 50%;
}

.preview-home .hero-date {
    color: #8b736c;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.preview-home .home-hero h2 {
    position: relative;
    z-index: 1;
    max-width: 310px;
    margin: 0.38rem 0 0;
    color: var(--vp-text);
    font-size: clamp(1.18rem, 5vw, 1.4rem);
    font-weight: 780;
    line-height: 1.25;
    letter-spacing: -0.035em;
}

.preview-home .home-hero .hero-invitation {
    font-size: .88rem;
    font-weight: 720;
    letter-spacing: -.02em;
}

.preview-home .home-hero p {
    position: relative;
    z-index: 1;
    margin-top: 0.34rem;
    color: #776a64;
    font-size: 0.72rem;
}

.preview-home .hero-sparkles {
    position: absolute;
    right: 1.3rem;
    top: 1.1rem;
    color: rgba(166, 95, 87, 0.55);
}

.preview-home .hero-sparkles svg {
    width: 38px;
    height: 38px;
}

.preview-home .home-section {
    margin-top: 1.5rem;
}

.preview-home .section-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin: 0 0.25rem 0.75rem;
}

.preview-home .section-heading h3 {
    font-size: 1rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.preview-home .section-heading span {
    color: var(--vp-faint);
    font-size: 0.72rem;
}

.preview-home .featured-grid,
.preview-home .utility-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.preview-home .app-icon {
    position: relative;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.70);
    color: var(--vp-text);
    text-align: left;
    box-shadow: var(--vp-shadow-sm);
}

.preview-home .app-icon:hover {
    transform: translateY(-3px);
    background: inherit;
    box-shadow: 0 13px 30px rgba(86, 68, 58, 0.11);
}

.preview-home .app-icon-featured {
    min-height: 174px;
    padding: 1rem;
    border-radius: 24px;
}

.preview-home .app-icon-featured[data-app="adventure"] {
    grid-column: 1 / -1;
    min-height: 132px;
    background: linear-gradient(135deg, #dce9dc, #f3e7cf);
}

.preview-home .app-icon-utility {
    min-height: 118px;
    padding: 0.9rem;
    border-radius: 20px;
    background: rgba(255, 253, 251, 0.82);
}

.preview-home .app-icon[data-tone="lavender"] { background: #eeeaf2; }
.preview-home .app-icon[data-tone="butter"] { background: #f4ead8; }

.preview-home .icon-circle {
    width: 48px;
    height: 48px;
    margin-bottom: 0.9rem;
    border-radius: 16px;
    font-size: 0;
    color: var(--tone-color, var(--vp-primary));
    background: rgba(255, 255, 255, 0.60);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 5px 14px rgba(86,68,58,0.06);
}

.preview-home .app-icon-utility .icon-circle {
    width: 42px;
    height: 42px;
    margin-bottom: 0.7rem;
    border-radius: 14px;
}

.preview-home .icon-circle svg {
    width: 26px;
    height: 26px;
}

.preview-home .app-icon[data-tone="lavender"] { --tone-color: var(--vp-lavender); }
.preview-home .app-icon[data-tone="butter"] { --tone-color: var(--vp-butter); }
.preview-home .app-icon[data-tone="rose"] { --tone-color: var(--vp-rose); }
.preview-home .app-icon[data-tone="sage"] { --tone-color: var(--vp-sage); }
.preview-home .app-icon[data-tone="blue"] { --tone-color: var(--vp-blue); }
.preview-home .app-icon[data-tone="taupe"] { --tone-color: #887d76; }
.preview-home .app-icon[data-tone="slate"] { --tone-color: #868b96; }

.preview-home .app-copy {
    min-width: 0;
}

.preview-home .icon-label {
    display: block;
    color: var(--vp-text);
    font-size: 0.9rem;
    font-weight: 730;
    text-align: left;
}

.preview-home .app-description {
    display: block;
    margin-top: 0.3rem;
    color: var(--vp-muted);
    font-size: 0.7rem;
    line-height: 1.45;
}

.preview-home .app-chevron {
    position: absolute;
    right: 0.85rem;
    top: 0.85rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--tone-color, var(--vp-muted));
    background: rgba(255,255,255,0.54);
}

.preview-home .app-chevron svg {
    width: 14px;
    height: 14px;
}

.preview-home .app-icon:active .icon-circle svg {
    transform: scale(0.92) rotate(-2deg);
}

.preview-home .icon-circle svg {
    transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

/* ---------- Travel projects preview ---------- */
.preview-projects .topbar {
    display: grid;
    grid-template-columns: minmax(76px, 1fr) auto minmax(76px, 1fr);
    gap: 0.5rem;
}

.preview-projects .topbar > :last-child {
    justify-self: end;
}

.preview-projects .back-btn {
    min-height: 40px;
    padding: 0.35rem 0.45rem;
    border-radius: 12px;
    color: var(--vp-primary);
}

.preview-projects .back-btn svg {
    width: 18px;
    height: 18px;
}

.preview-projects .vp-page-title {
    text-align: center;
}

.preview-projects .topbar h1 {
    color: var(--vp-text);
    font-size: 1rem;
    line-height: 1.25;
}

.preview-projects .vp-page-title span {
    display: block;
    margin-top: 0.12rem;
    color: var(--vp-faint);
    font-size: 0.62rem;
    white-space: nowrap;
}

.preview-projects .projects-shell {
    max-width: 560px;
    padding: 1.2rem 1rem 2.5rem;
}

.preview-projects .projects-overview {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin: 0.15rem 0.2rem 1rem;
}

.preview-projects .projects-overview h2 {
    font-size: 1.28rem;
    font-weight: 770;
    letter-spacing: -0.025em;
}

.preview-projects .projects-overview p {
    margin-top: 0.25rem;
    color: var(--vp-muted);
    font-size: 0.76rem;
}

.preview-projects .project-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 31px;
    padding: 0 0.7rem;
    border: 1px solid rgba(166, 95, 87, 0.16);
    border-radius: 999px;
    background: var(--vp-primary-soft);
    color: var(--vp-primary);
    font-size: 0.72rem;
    font-weight: 700;
}

.preview-projects .project-list {
    display: grid;
    gap: 0.8rem;
}

.preview-projects .project-card {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 0.9rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 22px;
    background: rgba(255, 253, 251, 0.88);
    box-shadow: var(--vp-shadow-sm);
    cursor: pointer;
}

.preview-projects .project-card::after {
    content: '';
    position: absolute;
    right: -30px;
    bottom: -44px;
    width: 104px;
    height: 104px;
    border-radius: 50%;
    background: var(--project-color, var(--vp-butter));
    opacity: 0.10;
    pointer-events: none;
}

.preview-projects .project-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(86,68,58,0.10);
}

.preview-projects .project-symbol {
    width: 48px;
    height: 48px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    color: color-mix(in srgb, var(--project-color, var(--vp-butter)) 76%, #4c403a);
    background: color-mix(in srgb, var(--project-color, var(--vp-butter)) 15%, white);
}

.preview-projects .project-symbol svg {
    width: 25px;
    height: 25px;
}

.preview-projects .project-main {
    flex: 1;
    min-width: 0;
    position: relative;
    z-index: 1;
}

.preview-projects .project-name {
    padding-right: 4.5rem;
    color: var(--vp-text);
    font-size: 0.96rem;
    font-weight: 740;
    line-height: 1.35;
}

.preview-projects .project-desc {
    margin-top: 0.3rem;
    color: var(--vp-muted);
    font-size: 0.78rem;
    line-height: 1.5;
}

.preview-projects .project-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.65rem;
    color: var(--vp-faint);
    font-size: 0.68rem;
}

.preview-projects .project-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: var(--vp-border);
}

.preview-projects .project-actions {
    position: absolute;
    right: 0.75rem;
    top: 0.75rem;
    z-index: 2;
    display: flex;
    gap: 0.28rem;
}

.preview-projects .project-actions .btn {
    min-height: 30px;
    padding: 0.3rem 0.55rem;
    border-radius: 10px;
    background: rgba(255,253,251,0.88);
    font-size: 0.68rem;
}

.preview-projects .project-actions .btn-danger {
    color: #a45750;
    border: 1px solid rgba(164,87,80,0.18);
    background: #faefed;
}

.preview-projects .empty {
    margin-top: 0.5rem;
    padding: 3.5rem 1.5rem;
    border: 1px dashed rgba(166, 95, 87, 0.24);
    border-radius: 24px;
    background: rgba(255,253,251,0.64);
}

.preview-projects .empty .icon {
    width: 62px;
    height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 0.9rem;
    border-radius: 20px;
    background: #f4ead8;
    color: var(--vp-butter);
}

.preview-projects .empty .icon svg {
    width: 30px;
    height: 30px;
}

.preview-projects .modal-overlay {
    background: rgba(58, 48, 43, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

.preview-projects .modal {
    border-radius: 28px 28px 0 0;
    background: var(--vp-surface);
    box-shadow: 0 -18px 50px rgba(63, 53, 47, 0.16);
}

.preview-projects .modal::before {
    content: '';
    display: block;
    width: 42px;
    height: 4px;
    margin: -0.55rem auto 1rem;
    border-radius: 99px;
    background: var(--vp-border);
}

.preview-projects .modal-title {
    color: var(--vp-text);
    font-size: 1.18rem;
    letter-spacing: -0.02em;
}

.preview-projects .color-picker {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-top: 0.4rem;
}

.preview-projects .color-dot {
    position: relative;
    width: 34px;
    height: 34px;
    border: 3px solid var(--vp-surface);
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--vp-border);
}

.preview-projects .color-dot.active {
    border-color: var(--vp-surface);
    box-shadow: 0 0 0 2px var(--vp-text), 0 6px 12px rgba(86,68,58,0.12);
    transform: translateY(-2px) scale(1.04);
}

.preview-projects .modal-actions {
    display: flex;
    gap: 0.6rem;
    margin-top: 1.15rem;
}

/* ========================================================================== */
/* Full application rollout                                                   */
/* ========================================================================== */

body.visual-preview:not(.preview-login) {
    min-height: 100vh;
    background:
        radial-gradient(circle at 8% 4%, rgba(201, 130, 141, 0.06), transparent 25rem),
        radial-gradient(circle at 96% 92%, rgba(130, 155, 136, 0.07), transparent 28rem),
        var(--vp-bg);
}

body.visual-preview .container {
    padding: 1rem;
}

body.visual-preview .container-wide {
    padding: 1rem;
}

body.visual-preview:not(.preview-home):not(.preview-projects):not(.preview-login) .topbar {
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(78px, 1fr) auto minmax(78px, 1fr);
    align-items: center;
    gap: 0.45rem;
    padding: 0.7rem max(1rem, env(safe-area-inset-left));
    border-bottom: 1px solid rgba(232, 222, 214, 0.70);
    background: rgba(247, 243, 238, 0.86);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
}

body.visual-preview:not(.preview-home):not(.preview-projects):not(.preview-login) .topbar > :last-child {
    justify-self: end;
}

body.visual-preview:not(.preview-home):not(.preview-projects):not(.preview-login) .topbar h1 {
    max-width: 48vw;
    overflow: hidden;
    color: var(--vp-text);
    font-size: 1.02rem;
    font-weight: 760;
    line-height: 1.3;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.visual-preview:not(.preview-projects) .back-btn {
    min-height: 40px;
    width: max-content;
    padding: 0.4rem 0.5rem;
    border-radius: 12px;
    color: var(--vp-primary);
    font-weight: 650;
}

body.visual-preview .back-btn svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
}

body.visual-preview .card {
    border: 1px solid rgba(255, 255, 255, 0.78);
    border-radius: 20px;
    background: rgba(255, 253, 251, 0.88);
    box-shadow: var(--vp-shadow-sm);
}

body.visual-preview .card:hover {
    box-shadow: 0 10px 28px rgba(86, 68, 58, 0.09);
}

body.visual-preview .card-title {
    color: var(--vp-text);
    font-weight: 730;
    letter-spacing: -0.01em;
}

body.visual-preview .list-item {
    border-radius: 15px;
}

body.visual-preview .list-item:hover {
    background: rgba(242, 223, 219, 0.56);
}

body.visual-preview .tag {
    border-radius: 999px;
}

body.visual-preview .tag-primary,
body.visual-preview .tag-selectable.active {
    background: var(--vp-primary-soft);
    color: var(--vp-primary);
}

body.visual-preview .tag-selectable {
    border-color: var(--vp-border);
    background: rgba(255, 253, 251, 0.78);
}

body.visual-preview .tag-selectable.active {
    border-color: rgba(166, 95, 87, 0.34);
}

body.visual-preview .empty,
body.visual-preview .tl-empty {
    margin-top: 0.5rem;
    padding: 3.2rem 1.2rem;
    border: 1px dashed rgba(166, 95, 87, 0.22);
    border-radius: 22px;
    background: rgba(255, 253, 251, 0.58);
    color: var(--vp-faint);
}

body.visual-preview .empty .icon {
    filter: saturate(0.55);
}

body.visual-preview .toast {
    border: 1px solid rgba(255,255,255,0.30);
    border-radius: 14px;
    box-shadow: var(--vp-shadow-md);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.visual-preview .toast-success { background: rgba(116, 143, 123, 0.94); }
body.visual-preview .toast-error { background: rgba(177, 99, 91, 0.94); }

body.visual-preview .modal-overlay {
    background: rgba(58, 48, 43, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.visual-preview .modal {
    border-radius: 28px 28px 0 0;
    background: var(--vp-surface);
    box-shadow: 0 -18px 50px rgba(63, 53, 47, 0.16);
}

body.visual-preview .modal-title {
    color: var(--vp-text);
    font-size: 1.14rem;
    font-weight: 760;
    letter-spacing: -0.02em;
}

body.visual-preview .dialog-overlay {
    background: rgba(58, 48, 43, 0.34);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.visual-preview .dialog-box {
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 22px;
    background: var(--vp-surface);
    box-shadow: 0 22px 60px rgba(63,53,47,0.18);
}

body.visual-preview .dialog-title {
    font-weight: 740;
}

body.visual-preview .dialog-footer button:last-child {
    color: var(--vp-primary);
}

body.visual-preview .dialog-footer button:hover {
    background: var(--vp-primary-soft);
}

body.visual-preview .dropdown-menu {
    border-color: rgba(255,255,255,0.82);
    border-radius: 16px;
    background: rgba(255,253,251,0.96);
    box-shadow: var(--vp-shadow-md);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.visual-preview .dropdown-menu .menu-item {
    min-height: 42px;
}

body.visual-preview .dropdown-menu .menu-item:hover,
body.visual-preview .folder-option:hover {
    background: var(--vp-primary-soft);
}

body.visual-preview .menu-dots {
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 12px;
    color: var(--vp-primary);
}

body.visual-preview .menu-dots:active {
    background: var(--vp-primary-soft);
    transform: scale(0.94);
}

body.visual-preview .batch-bar {
    border-color: var(--vp-border);
    background: rgba(255,253,251,0.92);
    box-shadow: 0 -12px 35px rgba(86,68,58,0.09);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

body.visual-preview .form-page,
body.visual-preview .detail-overlay,
body.visual-preview .post-detail-overlay {
    background: var(--vp-bg);
}

/* Timeline */
.page-timeline .view-switch {
    max-width: 360px;
    margin: 0.9rem auto 0;
    padding: 4px;
    border: 1px solid var(--vp-border);
    border-radius: 15px;
    background: rgba(255,253,251,0.76);
}

.page-timeline .view-switch button {
    min-height: 34px;
    border-radius: 11px;
    background: transparent;
    transition: all 180ms ease;
}

.page-timeline .view-switch button.active {
    color: var(--vp-primary);
    background: var(--vp-primary-soft);
    box-shadow: 0 3px 9px rgba(86,68,58,0.06);
}

.page-timeline .month-picker select,
.page-roadmap .status-select,
.page-roadmap .priority-select {
    min-height: 38px;
    border-color: var(--vp-border);
    border-radius: 12px;
    color: var(--vp-text);
    background: var(--vp-surface);
}

.page-timeline .tl-divider {
    border-bottom-color: rgba(232,222,214,0.70);
    color: var(--vp-primary);
    font-size: 0.86rem;
}

.page-timeline .tl-card {
    padding: 0.9rem;
    border-color: rgba(255,255,255,0.82);
    border-radius: 22px;
    background: rgba(255,253,251,0.90);
    box-shadow: var(--vp-shadow-sm);
    cursor: pointer;
    transition: transform 160ms ease, box-shadow 220ms ease, border-color 180ms ease;
}

.page-timeline .tl-card:hover {
    transform: translateY(-2px);
    border-color: rgba(166,95,87,0.15);
    box-shadow: 0 13px 30px rgba(86,68,58,0.10);
}

.page-timeline .tl-card:active {
    transform: translateY(1px) scale(0.985);
}

.page-timeline .tl-card:focus-visible {
    outline: 3px solid rgba(166,95,87,0.18);
    outline-offset: 3px;
}

.page-timeline .tl-photos {
    gap: 4px;
    border-radius: 16px;
}

.page-timeline .tl-photos .tl-photo {
    overflow: hidden;
    border-radius: 4px;
}

.page-timeline .detail-swiper {
    flex: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    background: #000;
}

.page-timeline .detail-swiper .swiper-wrapper {
    transition-timing-function: cubic-bezier(.22,.61,.36,1);
}

.page-timeline .detail-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #000;
}

.page-timeline .detail-swiper .swiper-zoom-container {
    width: 100%;
    height: 100%;
}

.page-timeline .detail-swiper img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

.page-timeline .detail-nav {
    position: absolute;
    top: 50%;
    z-index: 12;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.14);
    border-radius: 50%;
    color: #fff;
    background: rgba(0,0,0,0.24);
    font-size: 1.5rem;
    line-height: 1;
    transform: translateY(-50%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
    transition: opacity 180ms ease, background-color 180ms ease, transform 160ms ease;
}

.page-timeline .detail-nav:hover {
    background: rgba(255,255,255,0.18);
}

.page-timeline .detail-nav:active {
    transform: translateY(-50%) scale(0.92);
}

.page-timeline .detail-nav-prev { left: 0.8rem; }
.page-timeline .detail-nav-next { right: 0.8rem; }
.page-timeline .detail-nav.swiper-button-disabled { opacity: 0.18; pointer-events: none; }

.page-timeline .detail-counter {
    display: block;
    margin-bottom: 0.08rem;
    color: rgba(255,255,255,0.92);
    font-size: 0.72rem;
    font-weight: 700;
}

.page-timeline .detail-overlay.immersive .detail-nav {
    opacity: 0;
    pointer-events: none;
}

@media (pointer: coarse) {
    .page-timeline .detail-nav {
        display: none;
    }
}

.page-timeline .tl-tags .tag {
    background: var(--vp-primary-soft);
    color: var(--vp-primary);
}

.page-timeline .tag-link {
    appearance: none;
    border: 0;
    cursor: pointer;
    font-family: inherit;
    line-height: 1.35;
    transition: transform 150ms ease, background-color 180ms ease, box-shadow 180ms ease;
}

.page-timeline .tag-link:hover {
    background: #ead2cd;
    box-shadow: 0 4px 10px rgba(166,95,87,0.10);
}

.page-timeline .tag-link:active {
    transform: scale(0.94);
}

.page-timeline .tag-link:focus-visible {
    outline: 2px solid rgba(166,95,87,0.28);
    outline-offset: 2px;
}

.page-timeline .detail-bottom .tag-link {
    color: #fff;
    background: rgba(255,255,255,0.16);
}

.page-timeline .post-detail-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0 0 0.7rem;
}

.page-timeline .tag-collection-overlay {
    position: fixed;
    inset: 0;
    z-index: 550;
    overflow-y: auto;
    background:
        radial-gradient(circle at 8% 4%, rgba(201,130,141,0.08), transparent 24rem),
        radial-gradient(circle at 96% 92%, rgba(150,138,168,0.08), transparent 28rem),
        var(--vp-bg);
    animation: fadeIn 180ms ease both;
}

.page-timeline .tag-collection-topbar {
    position: sticky;
    top: 0;
    z-index: 10;
}

.page-timeline .tag-collection-body {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 1rem 1rem 2.5rem;
}

.page-timeline .tag-collection-hero {
    position: relative;
    overflow: hidden;
    margin-bottom: 1rem;
    padding: 1.2rem 1.25rem;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 22px;
    background: linear-gradient(135deg, #ead8d3 0%, #eee5dc 58%, #e7e4ec 100%);
    box-shadow: var(--vp-shadow-sm);
}

.page-timeline .tag-collection-hero::after {
    content: '#';
    position: absolute;
    right: 0.9rem;
    bottom: -1.6rem;
    color: rgba(255,255,255,0.38);
    font-size: 7rem;
    font-weight: 800;
    line-height: 1;
    pointer-events: none;
}

.page-timeline .tag-collection-kicker {
    color: #93736c;
    font-size: 0.62rem;
    font-weight: 780;
    letter-spacing: 0.13em;
}

.page-timeline .tag-collection-title {
    position: relative;
    z-index: 1;
    margin-top: 0.35rem;
    color: var(--vp-text);
    font-size: 1.55rem;
    font-weight: 790;
    letter-spacing: -0.035em;
    word-break: break-word;
}

.page-timeline .tag-collection-count {
    position: relative;
    z-index: 1;
    margin-top: 0.35rem;
    color: var(--vp-muted);
    font-size: 0.72rem;
}

.page-timeline .tag-collection-loading {
    padding: 3rem 1rem;
    color: var(--vp-faint);
    font-size: 0.82rem;
    text-align: center;
}

.page-timeline .tag-collection-more {
    padding: 0.7rem 0 0;
    text-align: center;
}

.page-timeline .tag-collection-more .btn {
    min-width: 138px;
}

.page-timeline .tag-collection-empty {
    margin-top: 0;
}

.page-timeline .post-detail-body .pd-photos {
    border-radius: 18px;
}

/* Timeline publish */
.page-timeline-publish .publish-body {
    padding-top: 1.2rem;
}

.page-timeline-publish .upload-item,
.page-timeline-publish .add-photo-btn {
    border-radius: 18px;
}

.page-timeline-publish .add-photo-btn {
    border-color: rgba(166,95,87,0.24);
    color: var(--vp-primary);
    background: rgba(255,253,251,0.64);
}

.page-timeline-publish .add-photo-btn:hover {
    border-color: var(--vp-primary);
    color: var(--vp-primary);
    background: var(--vp-primary-soft);
}

.page-timeline-publish .tag-input-area {
    min-height: 46px;
    border-color: var(--vp-border);
    border-radius: 14px;
    background: #faf7f3;
}

.page-timeline-publish .tag-pill,
.page-timeline-publish .loc-display {
    background: var(--vp-primary-soft);
    color: var(--vp-primary);
}

.page-timeline-publish .tag-suggestions,
.page-timeline-publish .loc-results {
    border-color: rgba(255,255,255,0.82);
    border-radius: 16px;
    background: rgba(255,253,251,0.97);
    box-shadow: var(--vp-shadow-md);
}

/* Wishes */
.page-wishes .wish-tabs,
.page-roadmap .tabs {
    max-width: 560px;
    margin-left: auto;
    margin-right: auto;
    padding: 4px;
    border: 1px solid var(--vp-border);
    border-radius: 15px;
    background: rgba(255,253,251,0.74);
}

.page-wishes .wish-tab,
.page-roadmap .tabs button {
    margin: 0;
    border: 0;
    border-radius: 11px;
}

.page-wishes .wish-tab.active,
.page-roadmap .tabs button.active {
    border: 0;
    color: var(--vp-primary);
    background: var(--vp-primary-soft);
}

.page-roadmap .tabs button.active::after {
    display: none;
}

.page-wishes .wish-item,
.page-wishes .fulfill-card {
    margin-bottom: 0.75rem;
    padding: 0.9rem;
    border: 1px solid rgba(255,255,255,0.80);
    border-radius: 19px;
    background: rgba(255,253,251,0.88);
    box-shadow: var(--vp-shadow-sm);
}

.page-wishes .wish-item:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.80);
}

.page-wishes .wish-badge.pending {
    background: var(--vp-primary-soft);
    color: var(--vp-primary);
}

.page-wishes .wish-badge.done {
    background: #819987;
}

.page-wishes .wish-done {
    opacity: 0.62;
}

/* Decor */
.page-decor .decor-section-title {
    color: var(--vp-text);
    font-size: 0.96rem;
    font-weight: 750;
    letter-spacing: -0.01em;
}

.page-decor .room-grid {
    gap: 0.65rem;
}

.page-decor .cat-grid {
    gap: 0.5rem;
}

.page-decor .room-card,
.page-decor .cat-card {
    border-color: rgba(255,255,255,0.78);
    background: rgba(255,253,251,0.86);
    box-shadow: var(--vp-shadow-sm);
}

.page-decor .room-card {
    min-height: 104px;
    padding: 0.8rem 0.45rem;
    border-radius: 19px;
}

.page-decor .cat-card {
    min-height: 80px;
    border-radius: 16px;
}

.page-decor .room-card:hover,
.page-decor .cat-card:hover,
.page-decor .note-card:hover {
    background: var(--vp-primary-soft);
    transform: translateY(-2px);
}

.page-decor .room-card:active,
.page-decor .cat-card:active,
.page-decor .note-card:active {
    transform: scale(0.965);
}

.page-decor .room-card .room-icon,
.page-decor .cat-card .cat-icon {
    filter: saturate(0.58);
}

.page-decor .note-card {
    padding: 0.8rem 0.9rem;
    border-color: rgba(255,255,255,0.80);
    border-radius: 17px;
    background: rgba(255,253,251,0.88);
    box-shadow: var(--vp-shadow-sm);
}

.page-decor .note-card.important {
    border-left: 4px solid #c6a261;
}

.page-decor #formView .card {
    padding: 1.1rem;
}

/* Roadmap */
.page-roadmap .idea-card {
    padding: 0.85rem 0.9rem;
    border-color: rgba(255,255,255,0.80);
    border-radius: 18px;
    background: rgba(255,253,251,0.88);
    box-shadow: var(--vp-shadow-sm);
    transition: transform 160ms ease, box-shadow 220ms ease;
}

.page-roadmap .idea-card:active {
    opacity: 1;
    transform: scale(0.97);
}

.page-roadmap .status-tag.pending { background: #f5ead6; color: #8b6931; }
.page-roadmap .status-tag.dev { background: #e5edf2; color: #567184; }
.page-roadmap .status-tag.done { background: #e5eee7; color: #58735f; }
.page-roadmap .priority-dot.high { background: #b96d65; }
.page-roadmap .priority-dot.medium { background: #c5a05e; }
.page-roadmap .priority-dot.low { background: #9299a3; }

.page-roadmap .detail-overlay {
    background: var(--vp-bg);
}

/* Trip hub and itinerary */
.page-itinerary #entryView {
    display: grid;
    gap: 0.75rem;
}

.page-itinerary #entryView .card {
    margin-bottom: 0;
    padding: 0.95rem;
    border-radius: 20px;
    transition: transform 160ms ease, box-shadow 220ms ease;
}

.page-itinerary #entryView .card:active {
    transform: scale(0.97);
}

.page-itinerary .trip-entry-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.page-itinerary .trip-entry-icon {
    width: 48px;
    height: 48px;
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 16px;
    background: rgba(255,255,255,0.68);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), 0 5px 14px rgba(86,68,58,0.06);
}

.page-itinerary .trip-entry-icon svg {
    width: 26px;
    height: 26px;
}

.page-itinerary .trip-entry-icon.tone-butter { color: var(--vp-butter); background: #f5ecdc; }
.page-itinerary .trip-entry-icon.tone-blue { color: var(--vp-blue); background: #e8eef2; }
.page-itinerary .trip-entry-icon.tone-rose { color: var(--vp-rose); background: #f5e8ea; }
.page-itinerary .trip-entry-icon.tone-sage { color: var(--vp-sage); background: #e7eee8; }
.page-itinerary .trip-entry-icon.tone-lavender { color: var(--vp-lavender); background: #ede9f1; }

.page-itinerary .trip-entry-copy {
    flex: 1;
    min-width: 0;
}

.page-itinerary .trip-entry-title {
    color: var(--vp-text);
    font-size: 0.92rem;
    font-weight: 720;
}

.page-itinerary .trip-entry-desc {
    margin-top: 0.2rem;
    color: var(--vp-muted);
    font-size: 0.72rem;
}

.page-itinerary .trip-entry-arrow {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: var(--vp-primary);
    background: var(--vp-primary-soft);
}

.page-itinerary .trip-entry-arrow svg {
    width: 15px;
    height: 15px;
}

.page-itinerary .timeline::before {
    background: var(--vp-border);
}

.page-itinerary .timeline-item {
    border-bottom-color: rgba(232,222,214,0.72);
}

.page-itinerary .timeline-item::before {
    background: var(--vp-primary);
    box-shadow: 0 0 0 2px var(--vp-primary-soft);
}

.page-itinerary #map-container {
    border-color: rgba(255,255,255,0.80);
    border-radius: 22px;
    box-shadow: var(--vp-shadow-sm);
}

.page-itinerary .dt-picker {
    border-color: var(--vp-border);
    border-radius: 14px;
    background: #faf7f3;
}

.page-itinerary .mood-btn,
.page-diary .mood-btn {
    min-height: 38px;
    border-color: var(--vp-border);
    background: rgba(255,253,251,0.82);
}

.page-itinerary .mood-btn.active,
.page-diary .mood-btn.active {
    border-color: rgba(166,95,87,0.34);
    background: var(--vp-primary-soft);
}

/* Packing */
.page-packing .pack-stats {
    margin: 0 0 0.8rem;
    padding: 0.85rem;
    border: 1px solid rgba(255,255,255,0.76);
    border-radius: 18px;
    background: rgba(255,253,251,0.72);
    box-shadow: var(--vp-shadow-sm);
}

.page-packing .pack-stats b {
    color: var(--vp-primary);
}

.page-packing .pack-add-bar {
    padding: 0.75rem;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 18px;
    background: rgba(255,253,251,0.78);
    box-shadow: var(--vp-shadow-sm);
}

.page-packing .pack-group {
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 19px;
    background: rgba(255,253,251,0.84);
    box-shadow: var(--vp-shadow-sm);
}

.page-packing .pack-group-title {
    color: var(--vp-primary);
}

.page-packing .pack-item {
    border-bottom-color: rgba(232,222,214,0.68);
}

.page-packing .pack-check.checked {
    border-color: #819987;
    background: #819987;
}

/* Gallery and photo browsing */
.page-photos-browse .card,
.page-gallery .folder {
    border-radius: 20px;
}

.page-photos-browse .card:active,
.page-gallery .folder-header:active {
    transform: scale(0.98);
}

.page-gallery .photo-grid {
    gap: 0.5rem;
}

.page-gallery .photo-grid .photo-item {
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(55,45,40,0.08);
}

.page-gallery .folder-header {
    min-height: 48px;
}

.page-gallery .shot-toggle {
    padding: 0.45rem 0.2rem;
}

.page-gallery .preview-overlay,
.page-diary .preview-overlay,
.page-wishes .preview-overlay,
.page-decor .preview-overlay {
    background: rgba(22,20,19,0.96);
}

/* Diary */
.page-diary .write-area {
    padding: 1rem;
    border-radius: 22px;
}

.page-diary .diary-entry {
    margin-bottom: 0.7rem;
    padding: 0.9rem;
    border: 1px solid rgba(255,255,255,0.78);
    border-radius: 18px;
    background: rgba(255,253,251,0.86);
    box-shadow: var(--vp-shadow-sm);
}

.page-diary .diary-entry:last-child {
    border-bottom: 1px solid rgba(255,255,255,0.78);
}

.page-diary .diary-checkin-badge {
    background: var(--vp-primary);
}

.page-diary .diary-photo img {
    border-radius: 14px;
}

/* Admin and settings */
.page-admin .container-wide,
.page-settings .container {
    padding-top: 1.2rem;
}

.page-admin .card,
.page-settings .card {
    padding: 1rem;
    border-radius: 22px;
}

.page-admin #logArea {
    border: 1px solid var(--vp-border);
    background: #f8f4ef !important;
}

@media (min-width: 768px) {
    body.visual-preview .modal {
        border-radius: 28px;
    }

    .page-decor .room-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@keyframes vpCardIn {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 768px) {
    .preview-projects .modal {
        border-radius: 28px;
        margin-bottom: 0;
    }

    .preview-projects .modal::before {
        display: none;
    }
}

@media (max-width: 390px) {
    .preview-login .login-card {
        padding: 1.75rem 1.25rem 1.45rem;
    }

    .preview-home .home-shell,
    .preview-projects .projects-shell {
        padding-left: 0.8rem;
        padding-right: 0.8rem;
    }

    .preview-home .home-hero {
        min-height: 90px;
        padding: .78rem .9rem;
    }

    .preview-home .app-icon-featured {
        min-height: 164px;
        padding: 0.85rem;
    }

    .preview-home .app-icon-utility {
        min-height: 112px;
        padding: 0.8rem;
    }

    .preview-home .app-description {
        font-size: 0.66rem;
    }

    .preview-projects .vp-page-title span {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    body.visual-preview *,
    body.visual-preview *::before,
    body.visual-preview *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ---------- Piggy coin economy ---------- */
.piggy-home-card {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.85rem;
    margin: 0.85rem 0 1.3rem;
    padding: 0.95rem 1rem;
    color: var(--vp-text);
    text-decoration: none;
    border: 1px solid #ead8c8;
    border-radius: 20px;
    background: linear-gradient(135deg, #fff9f1, #f7e9dc);
    box-shadow: var(--vp-shadow-sm);
    overflow: hidden;
}
.piggy-home-card::after { content:''; position:absolute; width:90px; height:90px; right:-34px; top:-34px; border-radius:50%; background:rgba(201,130,141,.10); }
.piggy-home-icon { width:52px; height:52px; display:grid; place-items:center; font-size:1.8rem; border-radius:18px; background:#fff4e7; box-shadow:inset 0 0 0 1px rgba(200,163,98,.18); }
.piggy-home-copy { min-width:0; }
.piggy-home-copy strong { display:block; font-size:.94rem; }
.piggy-home-copy span { display:block; margin-top:.15rem; color:var(--vp-muted); font-size:.72rem; }
.piggy-home-side { position:relative; z-index:1; text-align:right; }
.piggy-home-balance { display:block; color:#a55f57; font-size:1.05rem; font-weight:800; }
.piggy-home-checkin { margin-top:.3rem; padding:.34rem .65rem; border:0; border-radius:999px; background:var(--vp-primary); color:white; font-size:.68rem; font-weight:700; cursor:pointer; }
.piggy-home-checkin.done { color:var(--vp-sage); background:#edf3ee; }
.piggy-home-calendar { display:block; margin-top:.28rem; color:var(--vp-faint); font-size:.63rem; }

.page-piggy { min-height:100vh; background:linear-gradient(180deg,#f8f3ed 0,#f4eee8 100%); }
.page-piggy .topbar { position:sticky; top:0; z-index:40; }
.piggy-top-balance { display:flex; align-items:center; gap:.28rem; color:var(--vp-primary); font-size:.85rem; }
.piggy-shell { width:min(100% - 1.5rem,720px); margin:0 auto; padding:1rem 0 3rem; }
.piggy-hero { position:relative; min-height:170px; display:flex; align-items:center; justify-content:space-between; padding:1.45rem; overflow:hidden; border:1px solid rgba(255,255,255,.78); border-radius:28px; background:radial-gradient(circle at 90% 12%,rgba(255,255,255,.65),transparent 30%),linear-gradient(135deg,#e9c7bb,#d9a9a2 52%,#c9898b); box-shadow:0 18px 42px rgba(137,89,83,.16); color:#fff; }
.piggy-hero::before { content:''; position:absolute; width:180px; height:180px; right:-54px; bottom:-86px; border:1px solid rgba(255,255,255,.3); border-radius:50%; }
.piggy-hero-copy { position:relative; z-index:2; }
.piggy-kicker,.piggy-section-label { display:block; margin-bottom:.45rem; font-size:.62rem; letter-spacing:.16em; font-weight:800; opacity:.8; }
.piggy-balance-line { display:flex; align-items:baseline; gap:.5rem; }
.piggy-balance-line strong { font-size:2.6rem; line-height:1; letter-spacing:-.05em; }
.piggy-balance-line span { font-size:.82rem; font-weight:700; }
.piggy-hero p { margin:.65rem 0 0; font-size:.74rem; opacity:.8; }
.piggy-coin-art { position:relative; z-index:2; width:90px; height:90px; display:grid; place-items:center; flex:0 0 auto; font-size:3.2rem; border-radius:31px; background:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 16px 30px rgba(108,62,61,.12); transform:rotate(5deg); }

.piggy-tabs { display:flex; gap:.3rem; margin:1rem 0; padding:.3rem; border:1px solid var(--vp-border); border-radius:16px; background:rgba(255,253,251,.78); overflow-x:auto; }
.piggy-tabs button { flex:1; min-width:60px; padding:.55rem .65rem; border:0; border-radius:12px; color:var(--vp-muted); background:transparent; font-size:.76rem; font-weight:700; cursor:pointer; }
.piggy-tabs button.active { color:var(--vp-primary); background:var(--vp-primary-soft); box-shadow:inset 0 0 0 1px rgba(166,95,87,.08); }
.piggy-panel { display:none; animation:vpCardIn .28s ease both; }
.piggy-panel.active { display:block; }

.piggy-checkin-card { padding:1.15rem; border:1px solid var(--vp-border); border-radius:24px; background:var(--vp-surface); box-shadow:var(--vp-shadow-sm); }
.piggy-calendar-card { padding:1rem; border:1px solid var(--vp-border); border-radius:24px; background:var(--vp-surface); box-shadow:var(--vp-shadow-sm); }
.piggy-calendar-head { display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; gap:.55rem; text-align:center; }
.piggy-calendar-head>button { width:34px; height:34px; border:0; border-radius:12px; color:#8c6d65; background:#f5e9e3; font-size:1.25rem; cursor:pointer; }
.piggy-calendar-head h2 { margin:.12rem 0; font-size:.95rem; }
.piggy-calendar-head small { color:var(--vp-faint); font-size:.59rem; }
.piggy-calendar-card .piggy-section-label { margin:0; color:var(--vp-rose); opacity:1; font-size:.48rem; }
.piggy-calendar-summary { display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem; margin:.8rem 0; padding:.62rem .5rem; border-radius:16px; background:#faf5f1; text-align:center; }
.piggy-calendar-summary span,.piggy-calendar-summary b { display:block; }
.piggy-calendar-summary span { color:var(--vp-faint); font-size:.52rem; }
.piggy-calendar-summary b { margin-top:.14rem; color:#718b76; font-size:.68rem; }
.piggy-calendar-summary span:nth-child(2) b { color:#a66a61; }
.piggy-calendar-week,.piggy-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.25rem; }
.piggy-calendar-week { margin-bottom:.25rem; color:#a0958d; font-size:.5rem; text-align:center; }
.piggy-calendar-day { position:relative; min-width:0; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; padding:.25rem .08rem .2rem; border:1px solid transparent; border-radius:12px; background:#faf8f5; overflow:visible; font-family:inherit; cursor:pointer; }
.piggy-calendar-day.today { border-color:#d3a49a; box-shadow:inset 0 0 0 1px rgba(166,95,87,.06); }
.piggy-calendar-day.checked { background:#eff4ef; }
.piggy-calendar-day>span { color:#716a65; font-size:.55rem; }
.piggy-calendar-day>span i { margin-left:1px; font-size:.42rem; font-style:normal; }
.piggy-calendar-day>b { margin:.13rem 0 .05rem; color:#aaa19a; font-size:.56rem; }
.piggy-calendar-day>b.plus { color:#6f8b75; }.piggy-calendar-day>b.minus { color:#aa675e; }
.piggy-calendar-day>small { color:#aaa19a; font-size:.38rem; white-space:nowrap; }
.overview-tracks{width:calc(100% + .16rem);display:flex;flex-direction:column;gap:2px;margin-top:auto;align-self:stretch}.overview-track{position:relative;z-index:1;height:7px;display:block;margin:0 2px;border-radius:5px;background:var(--track-color);box-shadow:0 1px 2px rgba(74,71,66,.08)}.overview-track.join-prev{margin-left:-.22rem;border-top-left-radius:0;border-bottom-left-radius:0}.overview-track.join-next{margin-right:-.22rem;border-top-right-radius:0;border-bottom-right-radius:0}.overview-track em{display:none}.overview-more{position:absolute;right:2px;bottom:1px;color:#756e68;font-size:.34rem;font-style:normal}.piggy-calendar-activity-legend{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:.45rem;margin:.55rem 0 .05rem;color:#7e766f;font-size:.46rem}.piggy-calendar-activity-legend span{display:flex;align-items:center;gap:.18rem}.piggy-calendar-activity-legend span i{width:13px;height:6px;border-radius:5px;background:#91aa97}.piggy-calendar-activity-legend .wild i{background:#d5a06f}.piggy-calendar-activity-legend small{width:100%;color:#aaa098;text-align:center;font-size:.42rem}
.overview-day-list{display:flex;flex-direction:column;gap:.45rem;margin:.75rem 0}.overview-day-row{display:flex;align-items:center;gap:.65rem;padding:.65rem;border-radius:15px;background:#f6f3ee}.overview-day-row>i{width:32px;height:32px;display:grid;place-items:center;border-radius:11px;color:#fff;background:#93a998;font-style:normal}.overview-day-row.wild>i{background:#d1a073}.overview-day-row.water>i{background:#91b4bd}.overview-day-row div{min-width:0}.overview-day-row strong,.overview-day-row span{display:block}.overview-day-row strong{color:#514c47;font-size:.72rem}.overview-day-row span{margin-top:.12rem;color:#928a83;font-size:.56rem}
.piggy-checkin-head { display:flex; justify-content:space-between; align-items:flex-start; gap:1rem; }
.piggy-checkin-head h2 { margin:0; font-size:1.05rem; }
.piggy-checkin-card .piggy-section-label { color:var(--vp-rose); opacity:1; }
.piggy-streak { text-align:right; }
.piggy-streak strong { display:block; color:var(--vp-primary); font-size:1.65rem; line-height:1; }
.piggy-streak span { color:var(--vp-faint); font-size:.64rem; }
.piggy-moods { display:flex; flex-wrap:wrap; gap:.4rem; margin:.95rem 0 .75rem; }
.piggy-moods button { padding:.38rem .62rem; border:1px solid var(--vp-border); border-radius:999px; color:var(--vp-muted); background:#faf7f3; font-size:.68rem; cursor:pointer; }
.piggy-moods button.active { color:var(--vp-primary); border-color:rgba(166,95,87,.35); background:var(--vp-primary-soft); }
.piggy-moods.disabled { opacity:.5; pointer-events:none; }
.piggy-checkin-btn { width:100%; min-height:66px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; border:0; border-radius:18px; color:white; background:linear-gradient(135deg,#b66f67,#9e5b55); box-shadow:0 12px 24px rgba(166,95,87,.2); cursor:pointer; }
.piggy-checkin-btn span { font-size:.9rem; font-weight:800; }
.piggy-checkin-btn small { font-size:.65rem; opacity:.78; }
.piggy-checkin-btn.done { color:#647d69; background:#e8f0e9; box-shadow:none; }
.piggy-makeup-row { display:flex; justify-content:space-between; align-items:center; margin-top:.75rem; color:var(--vp-muted); font-size:.7rem; }
.piggy-text-btn { padding:.2rem 0; border:0; color:var(--vp-primary); background:none; font-size:.7rem; font-weight:700; cursor:pointer; }
.piggy-text-btn:disabled { color:var(--vp-faint); cursor:default; }

.piggy-calendar-view-switch { display:grid; grid-template-columns:1fr 1fr; gap:.28rem; margin-bottom:.7rem; padding:.28rem; border:1px solid var(--vp-border); border-radius:15px; background:rgba(255,253,251,.72); }
.piggy-calendar-view-switch button { min-height:38px; border:0; border-radius:11px; color:var(--vp-muted); background:transparent; font-size:.69rem; font-weight:750; cursor:pointer; }
.piggy-calendar-view-switch button.active { color:#96635e; background:#f4e5df; box-shadow:inset 0 0 0 1px rgba(166,95,87,.08); }

.life-calendar-card { padding:1rem .78rem 1.1rem; border:1px solid #e3d9cc; border-radius:24px; background:linear-gradient(155deg,#fffdf8,#f8f1e7); box-shadow:var(--vp-shadow-sm); }
.life-calendar-head { display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; gap:.5rem; text-align:center; }
.life-calendar-head>button { width:34px; height:34px; border:0; border-radius:12px; color:#796c61; background:#efe6da; font-size:1.25rem; cursor:pointer; }
.life-calendar-head span { color:#9a7c69; font-size:.42rem; font-weight:850; letter-spacing:.14em; }
.life-calendar-head h2 { margin:.12rem 0; font:800 .96rem/1.2 Georgia,"Songti SC",serif; color:#4f4a44; }
.life-calendar-head small { color:#9b9289; font-size:.54rem; }
.life-calendar-summary { display:grid; grid-template-columns:repeat(3,1fr) auto; gap:.28rem; align-items:stretch; margin:.8rem 0 .55rem; }
.life-calendar-summary>span { min-width:0; padding:.5rem .2rem; border-radius:13px; color:#968d84; background:rgba(255,255,255,.62); font-size:.48rem; text-align:center; }
.life-calendar-summary b { display:block; margin-top:.11rem; color:#5f7466; font-size:.65rem; }
.life-calendar-summary button { padding:0 .55rem; border:0; border-radius:13px; color:#fff9f2; background:#a66f66; font-size:.56rem; font-weight:800; white-space:nowrap; cursor:pointer; }
.life-calendar-legend { display:flex; flex-wrap:wrap; justify-content:center; gap:.58rem; margin:.35rem 0; color:#80786f; font-size:.51rem; }
.life-calendar-legend span { display:flex; align-items:center; gap:.2rem; }
.life-calendar-legend i { width:10px; height:6px; border-radius:999px; }
.life-calendar-legend .reading i,.life-track-bar.reading { background:#aebfa9; }
.life-calendar-legend .movie i,.life-track-bar.movie { background:#aea5c2; }
.life-calendar-legend .exercise i,.life-track-bar.exercise { background:#d7aa87; }
.life-calendar-legend .other i,.life-track-bar.other { background:#9ebbc1; }
.life-calendar-filters { display:flex; justify-content:center; gap:.25rem; margin:.48rem 0 .7rem; }
.life-calendar-filters button { min-width:48px; padding:.28rem .5rem; border:1px solid transparent; border-radius:999px; color:#918980; background:#f0e9df; font-size:.51rem; cursor:pointer; }
.life-calendar-filters button.active { color:#8d5f58; border-color:#dfc6bd; background:#f8e7e2; font-weight:800; }
.life-year-grid { overflow:hidden; border:1px solid #e4d8c8; border-radius:17px; background:#fbf5e9; box-shadow:inset 0 1px 8px rgba(103,80,59,.04); }
.life-month-row { display:grid; grid-template-columns:35px minmax(0,1fr); min-height:78px; border-bottom:1px solid rgba(188,167,142,.24); }
.life-month-row:last-child { border-bottom:0; }
.life-month-label { display:flex; flex-direction:column; align-items:center; justify-content:center; color:#7d7063; border-right:1px solid rgba(188,167,142,.22); background:rgba(239,227,209,.55); }
.life-month-label b { font:800 .62rem/1 Georgia,serif; }
.life-month-label span { margin-top:.16rem; color:#aa9986; font-size:.30rem; letter-spacing:.05em; }
.life-month-chart { min-width:0; padding:.23rem .28rem .28rem .16rem; }
.life-day-head { display:grid; grid-template-columns:repeat(31,minmax(0,1fr)); margin-left:17px; color:#a89b8d; font-size:.29rem; line-height:1; text-align:center; }
.life-day-head span { min-width:0; }
.life-day-head span.off { opacity:0; }
.life-category-row { display:grid; grid-template-columns:15px minmax(0,1fr); align-items:start; gap:2px; margin-top:2px; }
.life-category-row>b { width:14px; height:14px; display:grid; place-items:center; border-radius:5px; color:#fff; font-size:.31rem; line-height:1; }
.life-category-row>b.reading { background:#8fa18b; }.life-category-row>b.movie { background:#968daa; }.life-category-row>b.exercise { background:#bd8966; }.life-category-row>b.other { background:#7e9ea5; }
.life-track-grid { position:relative; display:grid; grid-template-columns:repeat(31,minmax(0,1fr)); grid-template-rows:repeat(var(--track-rows),14px); min-height:calc(var(--track-rows) * 14px); overflow:hidden; }
.life-track-grid>i { grid-row:1/-1; border-left:1px solid rgba(164,146,125,.10); }
.life-track-bar { position:relative; z-index:2; min-width:0; height:12px; align-self:center; display:flex; align-items:center; justify-content:center; gap:2px; margin:0; padding:0 2px; overflow:hidden; border:0; border-radius:4px; color:#3e4741; box-shadow:inset 0 1px 0 rgba(255,255,255,.28); cursor:pointer; }
.life-track-bar:active { filter:brightness(.95); transform:scaleY(.92); }
.life-track-bar span { min-width:0; overflow:hidden; font:700 .34rem/1 "Songti SC",serif; text-overflow:ellipsis; white-space:nowrap; }
.life-track-bar em { flex:none; color:rgba(54,57,54,.62); font-size:.25rem; font-style:normal; font-weight:900; }
.life-track-bar.participant-both { box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -2px 0 rgba(255,255,255,.22); }
.life-calendar-footnote { margin:.7rem .25rem 0; color:#958b82; font-size:.52rem; line-height:1.55; text-align:center; }
.life-entry-source { margin:0 0 .7rem; padding:.55rem .62rem; border-radius:12px; color:#6f8074; background:#eaf0ea; font-size:.62rem; line-height:1.45; }
.life-entry-modal textarea.form-input { min-height:76px; resize:vertical; }
.life-ongoing { margin:.15rem 0 .75rem; color:#766f68; font-size:.66rem; }
.life-entry-actions { display:flex; gap:.42rem; margin-top:.8rem; }
.life-entry-actions .btn { flex:1; }

@media(max-width:390px) {
    .life-calendar-card { padding:.82rem .52rem 1rem; }
    .life-calendar-summary { grid-template-columns:repeat(3,1fr); }
    .life-calendar-summary button { grid-column:1/-1; min-height:36px; }
    .life-month-row { grid-template-columns:31px minmax(0,1fr); }
    .life-month-chart { padding-right:.16rem; padding-left:.1rem; }
    .life-track-bar span { font-size:.3rem; }
    .life-track-bar em { display:none; }
}

.piggy-section-heading { display:flex; align-items:end; justify-content:space-between; margin:1.25rem .1rem .65rem; }
.piggy-section-heading > div { display:flex; align-items:baseline; gap:.55rem; }
.piggy-section-heading span { font-size:.92rem; font-weight:800; }
.piggy-section-heading small { color:var(--vp-faint); font-size:.65rem; }
.piggy-subheading { margin-top:1.7rem; }
.piggy-task-list { display:grid; gap:.55rem; }
.piggy-task { display:flex; align-items:center; gap:.7rem; padding:.85rem; border:1px solid var(--vp-border); border-radius:18px; background:var(--vp-surface); box-shadow:var(--vp-shadow-sm); cursor:default; }
.piggy-task:not(.completed)[onclick] { cursor:pointer; }
.piggy-task-check { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border:1.5px solid #dfd3ca; border-radius:10px; color:white; font-weight:800; }
.piggy-task.completed .piggy-task-check { border-color:#8ea493; background:#8ea493; }
.piggy-task-copy { flex:1; min-width:0; }
.piggy-task-copy strong,.piggy-task-copy span { display:block; }
.piggy-task-copy strong { font-size:.78rem; }
.piggy-task-copy span { margin-top:.15rem; color:var(--vp-muted); font-size:.65rem; }
.piggy-task-reward { color:var(--vp-primary); font-size:.72rem; font-weight:800; white-space:nowrap; }
.piggy-task.completed { opacity:.72; }

.piggy-reward-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.piggy-reward-card { min-height:190px; display:flex; flex-direction:column; padding:1rem; border:1px solid var(--vp-border); border-radius:22px; background:var(--vp-surface); box-shadow:var(--vp-shadow-sm); }
.piggy-reward-icon { width:50px; height:50px; display:grid; place-items:center; margin-bottom:.7rem; border-radius:17px; background:#f5ece4; font-size:1.65rem; }
.piggy-reward-card > strong { font-size:.82rem; }
.piggy-reward-card p { flex:1; margin:.3rem 0 .8rem; color:var(--vp-muted); font-size:.65rem; line-height:1.45; }
.piggy-reward-foot { display:flex; align-items:center; justify-content:space-between; gap:.4rem; }
.piggy-reward-foot span { color:var(--vp-primary); font-size:.72rem; font-weight:800; }
.piggy-reward-foot button,.piggy-redemption button,.piggy-admin-row button { padding:.32rem .55rem; border:0; border-radius:9px; color:white; background:var(--vp-primary); font-size:.64rem; font-weight:700; cursor:pointer; }
.piggy-reward-foot button:disabled { color:var(--vp-faint); background:#eee8e3; cursor:default; }
.piggy-redemption,.piggy-admin-row,.piggy-ledger-row { display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.78rem .15rem; border-bottom:1px solid var(--vp-border); }
.piggy-redemption > div:first-child strong,.piggy-redemption > div:first-child span,.piggy-admin-row > div:first-child strong,.piggy-admin-row > div:first-child span,.piggy-ledger-row > div:first-child strong,.piggy-ledger-row > div:first-child span { display:block; }
.piggy-redemption strong,.piggy-admin-row strong,.piggy-ledger-row strong { font-size:.74rem; }
.piggy-redemption span,.piggy-admin-row span,.piggy-ledger-row span { margin-top:.15rem; color:var(--vp-faint); font-size:.62rem; }
.piggy-redemption > div:last-child,.piggy-admin-row > div:last-child { display:flex; align-items:center; gap:.35rem; }
.piggy-redemption em,.piggy-admin-row em { font-size:.62rem; font-style:normal; }
.status-pending { color:#a77a2d; }.status-fulfilled { color:#728d78; }.status-cancelled { color:var(--vp-faint); }

.piggy-badge-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.piggy-badge { display:flex; flex-direction:column; align-items:center; min-height:175px; padding:1rem .7rem; text-align:center; border:1px dashed #d9cec6; border-radius:22px; color:var(--vp-faint); background:rgba(255,253,251,.6); filter:grayscale(.75); opacity:.65; }
.piggy-badge.earned { color:var(--vp-text); border-style:solid; border-color:#ead8c8; background:linear-gradient(145deg,#fffdfb,#f8eee6); filter:none; opacity:1; box-shadow:var(--vp-shadow-sm); }
.piggy-badge-icon { width:58px; height:58px; display:grid; place-items:center; margin-bottom:.6rem; border-radius:20px; background:#f0e7df; font-size:1.8rem; }
.piggy-badge strong { font-size:.8rem; }.piggy-badge span { margin:.25rem 0 .45rem; font-size:.64rem; }.piggy-badge small { margin-top:auto; font-size:.59rem; }
.piggy-ledger { padding:0 .85rem; border:1px solid var(--vp-border); border-radius:22px; background:var(--vp-surface); }
.piggy-ledger-row:last-child { border-bottom:0; }
.piggy-ledger-amount { text-align:right; font-size:.82rem; font-weight:800; }
.piggy-ledger-amount.plus { color:#718b76; }.piggy-ledger-amount.minus { color:var(--vp-primary); }
.piggy-ledger-amount small { display:block; margin-top:.12rem; color:var(--vp-faint); font-size:.57rem; font-weight:500; }
.piggy-empty { grid-column:1/-1; padding:2rem 1rem; text-align:center; color:var(--vp-faint); font-size:.72rem; }
.piggy-empty.compact { padding:1rem; }

.piggy-admin-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.piggy-admin-stats div { padding:.8rem .45rem; text-align:center; border:1px solid var(--vp-border); border-radius:17px; background:var(--vp-surface); }
.piggy-admin-stats strong,.piggy-admin-stats span { display:block; }
.piggy-admin-stats strong { color:var(--vp-primary); font-size:1.2rem; }.piggy-admin-stats span { margin-top:.2rem; color:var(--vp-faint); font-size:.58rem; }
.piggy-admin-row.inactive { opacity:.5; }
.piggy-admin-row b { color:var(--vp-primary); font-size:.72rem; }
.piggy-admin-row button.danger { color:#a45d57; background:#f4e1de; }
.piggy-modal-note { margin:-.2rem 0 .9rem; color:var(--vp-muted); font-size:.7rem; line-height:1.5; }
.piggy-modal-actions { display:flex; gap:.5rem; margin-top:1rem; }
.piggy-form-row { display:grid; grid-template-columns:1fr 1fr; gap:.55rem; }
.piggy-checkbox { display:flex; align-items:center; gap:.45rem; color:var(--vp-muted); font-size:.75rem; }

@media (min-width:620px) {
    .piggy-reward-grid,.piggy-badge-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (max-width:390px) {
    .piggy-shell { width:min(100% - 1rem,720px); }
    .piggy-hero { min-height:150px; padding:1.15rem; }
    .piggy-balance-line strong { font-size:2.25rem; }
    .piggy-coin-art { width:74px; height:74px; font-size:2.6rem; }
    .piggy-tabs button { min-width:54px; padding:.5rem; }
}

/* ---------- Weekly goal fund ---------- */
.goal-home-card { position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.85rem; margin:-.55rem 0 1.3rem; padding:1rem; border:1px solid #d9e1dc; border-radius:20px; color:var(--vp-text); background:linear-gradient(135deg,#f2f5ef,#e4ece5); box-shadow:var(--vp-shadow-sm); cursor:pointer; overflow:hidden; }
.goal-home-card::after { content:''; position:absolute; width:100px; height:100px; right:-45px; bottom:-55px; border-radius:50%; border:20px solid rgba(255,255,255,.35); }
.goal-home-icon { width:50px; height:50px; display:grid; place-items:center; border-radius:17px; color:#758c79; background:rgba(255,255,255,.6); }
.goal-home-icon svg { width:27px; height:27px; }
.goal-home-copy strong,.goal-home-copy span { display:block; }.goal-home-copy strong{font-size:.9rem}.goal-home-copy span{margin-top:.16rem;color:var(--vp-muted);font-size:.67rem}
.goal-home-side { position:relative; z-index:1; text-align:right; }.goal-home-side strong{display:block;color:#718977;font-size:.94rem}.goal-home-side span{font-size:.61rem;color:var(--vp-faint)}

.wild-home-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.85rem;margin:-.55rem 0 1.3rem;padding:1rem;border:1px solid #ddd8ca;border-radius:20px;color:var(--vp-text);background:linear-gradient(135deg,#f8f2df,#e7eadc 58%,#d8e4df);box-shadow:var(--vp-shadow-sm);cursor:pointer;overflow:hidden}.wild-home-card::after{content:'';position:absolute;width:110px;height:54px;right:-22px;bottom:-26px;border-radius:50% 50% 0 0;background:rgba(117,146,126,.12);transform:rotate(-8deg)}.wild-home-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(145deg,#8fa78c,#6f8d80);box-shadow:0 8px 18px rgba(74,105,89,.16);font:800 1.7rem/1 Georgia,serif}.wild-home-copy{min-width:0}.wild-home-copy strong,.wild-home-copy span{display:block}.wild-home-copy strong{font-size:.9rem}.wild-home-copy span{margin-top:.16rem;overflow:hidden;color:var(--vp-muted);font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.wild-home-side{position:relative;z-index:1;display:flex;align-items:center;gap:.25rem;color:#71877a}.wild-home-side b{font-size:.64rem}.wild-home-side span{font-size:1.1rem}

.household-home-card{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.82rem;margin:-.55rem 0 1.3rem;padding:.95rem 1rem;border:1px solid #e3d8d0;border-radius:20px;color:var(--vp-text);background:linear-gradient(135deg,#fbf7f2,#eee7df);box-shadow:var(--vp-shadow-sm);cursor:pointer;overflow:hidden}.household-home-card::after{content:'';position:absolute;width:82px;height:82px;right:-38px;top:-42px;border:18px solid rgba(255,255,255,.4);border-radius:50%}.household-home-icon{width:50px;height:50px;display:grid;place-items:center;border-radius:17px;color:#fff;background:linear-gradient(145deg,#a7b6a8,#809486);box-shadow:0 8px 18px rgba(86,104,91,.13);font-size:1.28rem}.household-home-copy{min-width:0}.household-home-copy strong,.household-home-copy span{display:block}.household-home-copy strong{font-size:.9rem}.household-home-copy span{margin-top:.16rem;overflow:hidden;color:var(--vp-muted);font-size:.67rem;text-overflow:ellipsis;white-space:nowrap}.household-home-side{position:relative;z-index:1;text-align:right}.household-home-side b{display:block;color:#a16d65;font-size:.68rem}.household-home-side small{display:none;min-width:19px;height:19px;place-items:center;margin:.25rem 0 0 auto;padding:0 4px;border-radius:999px;color:#fff;background:#b76f6b;box-sizing:border-box;font-size:.48rem;font-weight:850}.household-home-side small.visible{display:grid}

.page-goals { min-height:100vh; background:linear-gradient(180deg,#f5f2ec,#f1eee8); }
.page-goals .topbar { position:sticky; top:0; z-index:40; }
.goal-top-fund { color:#748b79; font-size:.8rem; font-weight:800; }
.goal-shell { width:min(100% - 1.5rem,760px); margin:0 auto; padding:1rem 0 3rem; }
.goal-hero { min-height:160px; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.35rem; border:1px solid rgba(255,255,255,.8); border-radius:28px; color:#fff; background:radial-gradient(circle at 90% 15%,rgba(255,255,255,.24),transparent 28%),linear-gradient(135deg,#9cad9e,#748c7a); box-shadow:0 16px 38px rgba(72,95,78,.18); }
.goal-kicker { display:block; margin-bottom:.45rem; font-size:.59rem; font-weight:800; letter-spacing:.16em; opacity:.76; }
.goal-hero h2 { margin:0; font-size:1.35rem; }.goal-hero p{margin:.45rem 0 0;font-size:.7rem;opacity:.8}
.goal-hero-ring { width:82px; height:82px; display:flex; flex-direction:column; align-items:center; justify-content:center; flex:0 0 auto; border:8px solid rgba(255,255,255,.22); border-top-color:rgba(255,255,255,.75); border-radius:50%; }
.goal-hero-ring strong{font-size:1.05rem}.goal-hero-ring span{font-size:.55rem;opacity:.8}
.goal-tabs { display:flex; gap:.25rem; margin:1rem 0; padding:.28rem; border:1px solid var(--vp-border); border-radius:16px; background:rgba(255,253,251,.8); overflow-x:auto; }
.goal-tabs button { position:relative; flex:1; min-width:58px; padding:.55rem .4rem; border:0; border-radius:12px; color:var(--vp-muted); background:none; font-size:.72rem; font-weight:750; cursor:pointer; }
.goal-tabs button.active { color:#6f8875; background:#e8eee8; }
.goal-tab-dot { position:absolute; width:7px; height:7px; right:13%; top:7px; border-radius:50%; background:#bd6c66; }
.goal-panel { display:none; animation:vpCardIn .25s ease both; }.goal-panel.active{display:block}
.goal-section-heading { display:flex; justify-content:space-between; align-items:end; margin:1.15rem .1rem .65rem; }.goal-section-heading>div{display:flex;align-items:baseline;gap:.5rem}.goal-section-heading span{font-size:.9rem;font-weight:800}.goal-section-heading small{font-size:.62rem;color:var(--vp-faint)}.goal-subheading{margin-top:1.55rem}

.goal-deposit-card { display:flex; align-items:center; gap:.75rem; padding:.9rem; border:1px solid #e4ddd3; border-radius:20px; background:var(--vp-surface); box-shadow:var(--vp-shadow-sm); }
.goal-deposit-icon { width:44px; height:44px; display:grid; place-items:center; flex:0 0 auto; border-radius:15px; background:#f5ead7; font-size:1.35rem; }
.goal-deposit-card>div:nth-child(2){flex:1;min-width:0}.goal-deposit-card strong,.goal-deposit-card span{display:block}.goal-deposit-card strong{font-size:.76rem}.goal-deposit-card span{margin-top:.15rem;color:var(--vp-muted);font-size:.61rem}.goal-deposit-card em{color:#718977;font-size:.65rem;font-style:normal;font-weight:750}.goal-deposit-card button{padding:.4rem .62rem;border:0;border-radius:10px;color:white;background:#7e9683;font-size:.65rem;font-weight:750}.goal-deposit-card button:disabled{background:#ddd7d0;color:#999}
.goal-plan-editor { padding:1rem; border:1px solid var(--vp-border); border-radius:22px; background:var(--vp-surface); box-shadow:var(--vp-shadow-sm); }
.goal-plan-row { margin-bottom:.7rem; padding:.82rem; border:1px solid rgba(215,207,198,.82); border-radius:18px; background:#fbf8f4; box-shadow:0 6px 18px rgba(86,68,58,.055); transition:background-color 180ms ease,border-color 180ms ease; }
.goal-plan-row-head{display:flex;align-items:flex-end;gap:.55rem}.goal-plan-category-field{min-width:0;flex:1}.goal-plan-category-field>span,.goal-plan-title-field>span{display:block;margin:0 0 .24rem .12rem;color:var(--vp-muted);font-size:.57rem;font-weight:750}.goal-plan-category-field .goal-category-input{width:min(155px,100%);min-height:38px}.goal-plan-row-head button{flex:none;width:32px;height:32px;margin-bottom:3px;border:0;border-radius:10px;color:var(--vp-primary);background:rgba(255,255,255,.62);font-size:1.1rem}.goal-plan-title-field{display:block;margin-top:.62rem}.goal-plan-title-field .goal-title-input{width:100%;font-weight:720}.goal-plan-fields{display:flex;gap:.5rem;margin:.48rem 0}.goal-plan-fields label{display:flex;align-items:center;gap:.35rem;color:var(--vp-muted);font-size:.67rem}.goal-plan-fields label input{width:58px;min-height:38px;padding:.35rem}.goal-plan-row .form-input{min-height:42px;font-size:.72rem}.goal-add-item{width:100%;margin:.75rem 0;padding:.7rem;border:1px dashed #cfd9d1;border-radius:14px;color:#718977;background:#f2f6f2;font-size:.72rem;font-weight:750}.goal-plan-summary{padding:.65rem;text-align:center;border-radius:12px;color:#708276;background:#edf2ed;font-size:.68rem}.goal-editor-actions,.goal-modal-actions{display:flex;gap:.5rem;margin-top:.8rem}
.goal-item-card { margin-bottom:.75rem; padding:.9rem; border:1px solid rgba(215,207,198,.82); border-radius:20px; background:#fbf8f4; box-shadow:0 7px 20px rgba(86,68,58,.065); }
.goal-item-meta{display:flex;align-items:center;justify-content:space-between;gap:.5rem}.goal-category{padding:.18rem .46rem;border-radius:999px;color:#6f8875;background:rgba(255,255,255,.66);font-size:.58rem;font-weight:760}.goal-item-meta em{font-size:.65rem;font-style:normal;color:#718977;font-weight:800}.goal-item-title{display:block;margin-top:.42rem;color:var(--vp-text);font-size:.82rem;line-height:1.4}.goal-progress{height:6px;margin:.62rem 0;border-radius:999px;background:rgba(228,222,215,.78);overflow:hidden}.goal-progress i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#9aac9d,#708977)}.goal-item-card p{margin:.45rem 0;color:var(--vp-muted);font-size:.64rem;line-height:1.5}.goal-item-card>button{width:100%;margin-top:.35rem;padding:.58rem;border:0;border-radius:12px;color:white;background:#7d9482;font-size:.68rem;font-weight:750}.goal-item-card>button:disabled{color:var(--vp-faint);background:#eeeae5}
.goal-plan-row[data-category="读书"],.goal-item-card[data-category="读书"]{border-color:#d5dfd4;background:linear-gradient(145deg,#fbfdfb,#f0f5ef)}
.goal-plan-row[data-category="健身"],.goal-item-card[data-category="健身"]{border-color:#ead8cf;background:linear-gradient(145deg,#fffdfb,#f8eee8)}
.goal-plan-row[data-category="学习"],.goal-item-card[data-category="学习"]{border-color:#d5dfe5;background:linear-gradient(145deg,#fbfdfe,#eef4f7)}
.goal-plan-row[data-category="兴趣"],.goal-item-card[data-category="兴趣"]{border-color:#dfd8e5;background:linear-gradient(145deg,#fdfcfe,#f3eff6)}
.goal-plan-row[data-category="生活习惯"],.goal-item-card[data-category="生活习惯"]{border-color:#e6dfc9;background:linear-gradient(145deg,#fffefa,#f7f3e7)}
.goal-plan-row[data-category="其他"],.goal-item-card[data-category="其他"]{border-color:#ddd9d4;background:linear-gradient(145deg,#fdfcfb,#f3f1ee)}
.goal-checkin-row,.goal-cash-row,.goal-history-row { display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.72rem .1rem; border-bottom:1px solid var(--vp-border); }.goal-checkin-row strong,.goal-checkin-row span,.goal-history-row strong,.goal-history-row span{display:block}.goal-checkin-row strong,.goal-history-row strong{font-size:.71rem}.goal-checkin-row span,.goal-history-row span{margin-top:.14rem;color:var(--vp-faint);font-size:.59rem}.goal-thumb-stack{display:flex;align-items:center;gap:.25rem}.goal-thumb-stack img{width:38px;height:38px;object-fit:cover;border-radius:10px}.goal-thumb-stack button{padding:.3rem .48rem;border:0;border-radius:9px;color:#a15d57;background:#f3dfdc;font-size:.6rem}
.goal-partner-summary { display:flex;align-items:center;justify-content:space-between;padding:.8rem;border-radius:17px;background:#eaf0ea }.goal-partner-summary strong{color:#6f8875;font-size:1rem}.goal-partner-summary span{font-size:.64rem;color:var(--vp-muted)}.goal-partner-item{display:flex;justify-content:space-between;padding:.6rem .2rem;border-bottom:1px solid var(--vp-border);font-size:.68rem}.goal-partner-item b{color:#718977}
.goal-review-card { margin-bottom:.7rem;padding:.9rem;border:1px solid var(--vp-border);border-radius:21px;background:var(--vp-surface);box-shadow:var(--vp-shadow-sm) }.goal-review-head{display:flex;justify-content:space-between;gap:.6rem}.goal-review-head div span,.goal-review-head div strong{display:block}.goal-review-head div span{color:#718977;font-size:.58rem}.goal-review-head div strong{margin-top:.12rem;font-size:.78rem}.goal-review-head small{color:var(--vp-faint);font-size:.57rem}.goal-review-card p{font-size:.67rem;color:var(--vp-muted)}.goal-evidence-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.35rem;margin:.65rem 0}.goal-evidence-grid img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:12px}.goal-review-actions{display:flex;gap:.45rem}.goal-review-actions button{flex:1;padding:.58rem;border:0;border-radius:11px;font-size:.68rem;font-weight:750}.goal-review-actions .approve{color:white;background:#7c9481}.goal-review-actions .reject{color:#a15d57;background:#f2dfdc}
.goal-settlement-card { padding:1rem;border:1px solid #dae3dc;border-radius:22px;background:linear-gradient(135deg,#f7faf7,#e9f0ea) }.goal-money-row{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}.goal-money-row div{text-align:center}.goal-money-row strong,.goal-money-row span{display:block}.goal-money-row strong{color:#6e8774;font-size:.88rem}.goal-money-row span{margin-top:.15rem;color:var(--vp-muted);font-size:.55rem}.goal-settlement-card p{margin:.75rem 0 0;text-align:center;color:var(--vp-muted);font-size:.62rem}.goal-cash-row{display:grid;grid-template-columns:1fr auto;align-items:center}.goal-cash-row>div:first-child strong,.goal-cash-row>div:first-child span{display:block}.goal-cash-row>div:first-child strong{font-size:.7rem}.goal-cash-row>div:first-child span{font-size:.58rem;color:var(--vp-faint)}.goal-cash-row>b{color:#718977;font-size:.76rem}.goal-cash-row>div:last-child{grid-column:1/-1;display:flex;gap:.35rem;margin-top:.25rem}.goal-cash-row button{padding:.36rem .52rem;border:0;border-radius:9px;color:white;background:#7b9380;font-size:.61rem}.goal-cash-note{margin-top:1rem;padding:.75rem;border-radius:14px;color:var(--vp-muted);background:#eeeae4;font-size:.61rem;line-height:1.55}
.goal-badge-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:.6rem}.goal-badge{min-height:155px;display:flex;flex-direction:column;align-items:center;padding:.85rem;text-align:center;border:1px dashed #d7d0c8;border-radius:20px;color:var(--vp-faint);background:rgba(255,253,251,.65);filter:grayscale(.8);opacity:.65}.goal-badge.earned{color:var(--vp-text);border-style:solid;border-color:#dce4dd;background:linear-gradient(145deg,#fbfdfb,#edf3ed);filter:none;opacity:1;box-shadow:var(--vp-shadow-sm)}.goal-badge>div{width:52px;height:52px;display:grid;place-items:center;margin-bottom:.5rem;border-radius:18px;background:#edf1ed;font-size:1.55rem}.goal-badge strong{font-size:.75rem}.goal-badge span{margin:.22rem 0;font-size:.6rem}.goal-badge small{margin-top:auto;font-size:.57rem}.goal-history-row em{font-size:.61rem;font-style:normal;color:#718977}
.goal-empty{padding:2rem 1rem;text-align:center;color:var(--vp-faint);font-size:.68rem}.goal-empty.compact{padding:1rem}.goal-empty.danger{color:#9d665f;background:#f4e4e1;border-radius:15px}.goal-modal-note{padding:.6rem;border-radius:12px;color:#9a625c;background:#f4e3e0;font-size:.67rem}.goal-image-overlay{position:fixed;inset:0;z-index:900;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(24,22,20,.9)}.goal-image-overlay.hidden{display:none}.goal-image-overlay img{max-width:100%;max-height:100%;object-fit:contain}
@media(min-width:650px){.goal-badge-grid{grid-template-columns:repeat(4,1fr)}}
@media(max-width:390px){.goal-shell{width:min(100% - 1rem,760px)}.goal-hero{min-height:145px;padding:1.05rem}.goal-hero-ring{width:72px;height:72px}.goal-tabs button{min-width:54px}.goal-money-row strong{font-size:.78rem}}

/* ---------- Mountain history + compact plan editor ---------- */
.goal-hero-copy{min-width:0}
.goal-week-switcher{display:flex;align-items:center;gap:.32rem;margin-top:.7rem}
.goal-week-switcher button{height:28px;min-width:28px;display:grid;place-items:center;padding:0 .44rem;border:1px solid rgba(255,255,255,.28);border-radius:9px;color:#fff;background:rgba(255,255,255,.13);font-size:.92rem;font-weight:760;cursor:pointer}
.goal-week-switcher button:disabled{opacity:.28;cursor:default}
.goal-week-switcher .goal-current-week-btn{font-size:.52rem}
.goal-history-notice{display:flex;align-items:center;justify-content:space-between;gap:.65rem;margin-bottom:.7rem;padding:.58rem .68rem;border:1px solid #ded7c7;border-radius:14px;color:#746d61;background:#f4f0e3;font-size:.58rem}
.goal-history-notice button{flex:none;padding:.32rem .46rem;border:0;border-radius:9px;color:#fff;background:#819584;font-size:.55rem;font-weight:760}

.goal-plan-editor{padding:.72rem;border-radius:20px}
.goal-plan-row{margin-bottom:.55rem;padding:.64rem;border-radius:16px;box-shadow:0 5px 14px rgba(86,68,58,.045)}
.goal-plan-row-head{display:grid;grid-template-columns:minmax(0,1fr) 88px;align-items:end;gap:.42rem}
.goal-plan-category-field,.goal-plan-count-field{min-width:0;flex:none}
.goal-plan-category-field>span,.goal-plan-count-field>span,.goal-plan-title-field>span{display:block;margin:0 0 .20rem .08rem;color:var(--vp-muted);font-size:.52rem;font-weight:760}
.goal-plan-category-field .goal-category-input{width:100%;min-height:35px}
.goal-plan-count-field>div{position:relative}
.goal-plan-count-field input{width:100%;padding-right:1.35rem!important}
.goal-plan-count-field b{position:absolute;top:50%;right:.46rem;color:var(--vp-faint);font-size:.55rem;transform:translateY(-50%)}
.goal-plan-kind-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.42rem}
.goal-plan-kind-head>button{width:28px;height:28px;padding:0;border:0;border-radius:9px;color:var(--vp-primary);background:rgba(255,255,255,.68);font-size:1rem}
.goal-kind-chip{display:inline-flex!important;align-items:center!important;width:max-content;padding:.17rem .42rem;border-radius:999px;font-size:.52rem!important;font-weight:800;line-height:1.3}
.goal-kind-chip.baozi{color:#9b625a;background:#f5dfd9}
.goal-kind-chip.mantou{color:#8b744f;background:#f2e7c9}
.goal-plan-title-field{display:block;margin-top:.42rem}
.goal-plan-row .form-input{height:35px;min-height:35px;padding:.38rem .52rem;border-radius:10px;font-size:.68rem}
.goal-kind-add-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem;margin:.62rem 0}
.goal-kind-add-actions.legacy{grid-template-columns:1fr}
.goal-add-item{margin:0;padding:.62rem;border-radius:12px;font-size:.67rem}
.goal-add-item.baozi{border-color:#e5c7c0;color:#955f58;background:#fbebe7}
.goal-add-item.mantou{border-color:#e0d1a8;color:#806b46;background:#f8f0d9}
.goal-plan-summary{padding:.62rem;border-radius:11px;font-size:.61rem;line-height:1.45}
.goal-plan-summary>div{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.22rem .1rem;text-align:left}
.goal-plan-summary>div+div{border-top:1px solid rgba(112,130,118,.12)}
.goal-plan-summary>div b{flex:none}.goal-plan-summary>div span{text-align:right}
.goal-plan-summary>small{display:block;margin-top:.32rem;color:var(--vp-faint);font-size:.54rem}
.goal-editor-actions{margin-top:.68rem}

.goal-item-meta>div{display:flex;align-items:center;gap:.3rem;min-width:0}
.goal-item-card[data-goal-kind="baozi"] .goal-progress i{background:linear-gradient(90deg,#d9a79c,#a86d64)}
.goal-item-card[data-goal-kind="mantou"] .goal-progress i{background:linear-gradient(90deg,#d9c58f,#a58c55)}
.goal-kind-progress-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem;margin-bottom:.85rem}
.goal-kind-progress-grid>div{padding:.72rem;border:1px solid #e1d9cf;border-radius:17px;background:#fffdfa}
.goal-kind-progress-grid>div.baozi{border-color:#ead4ce;background:linear-gradient(145deg,#fffaf8,#f8e8e3)}
.goal-kind-progress-grid>div.mantou{border-color:#e5d9b9;background:linear-gradient(145deg,#fffdf8,#f7efd8)}
.goal-kind-progress-grid span,.goal-kind-progress-grid strong,.goal-kind-progress-grid small{display:block}
.goal-kind-progress-grid span{color:var(--vp-muted);font-size:.55rem}
.goal-kind-progress-grid strong{margin:.16rem 0;color:#765f59;font-size:1rem}
.goal-kind-progress-grid small{color:var(--vp-faint);font-size:.54rem}
.goal-kind-list{margin-top:.8rem}.goal-kind-list>header{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin:0 .08rem .5rem}
.goal-kind-list>header div strong,.goal-kind-list>header div span{display:block}
.goal-kind-list>header div strong{font-size:.76rem}.goal-kind-list>header div span{margin-top:.1rem;color:var(--vp-faint);font-size:.53rem}
.goal-kind-list>header b{flex:none;padding:.2rem .42rem;border-radius:999px;color:#8d756e;background:#f1e8e3;font-size:.52rem}
.goal-kind-list.mantou>header b{color:#806d4c;background:#f2ead4}
.goal-partner-item>span{display:flex;align-items:center;gap:.3rem;min-width:0}.goal-partner-item .goal-kind-chip{flex:none}
.goal-money-row.split{grid-template-columns:repeat(4,minmax(0,1fr));gap:.28rem}
.goal-money-row.split strong{font-size:.76rem}
.goal-money-row.split span{font-size:.48rem}

.goal-partner-record-title{display:flex;align-items:center;justify-content:space-between;margin:.9rem 0 .5rem}
.goal-partner-record-title strong{font-size:.72rem}
.goal-partner-record-title span{color:var(--vp-faint);font-size:.56rem}
.goal-record-list{display:grid;gap:.55rem}
.goal-record-card{position:relative;padding:.72rem;border:1px solid #ded8d0;border-radius:17px;background:rgba(255,253,250,.88);box-shadow:0 5px 16px rgba(76,65,57,.05);overflow:hidden}
.goal-record-card:before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:#b6b0a9}
.goal-record-card.status-approved:before{background:#7d9a83}
.goal-record-card.status-rejected:before{background:#ba7770}
.goal-record-card.status-pending:before,.goal-record-card.status-resubmitted:before{background:#c19b60}
.goal-record-card header{display:flex;align-items:flex-start;justify-content:space-between;gap:.5rem}
.goal-record-card header div{min-width:0}
.goal-record-card header span,.goal-record-card header strong{display:block}
.goal-record-card header span{color:#78907d;font-size:.52rem;font-weight:760}
.goal-record-card header strong{margin-top:.12rem;font-size:.72rem;line-height:1.35}
.goal-record-card header em{flex:none;color:var(--vp-faint);font-size:.52rem;font-style:normal}
.goal-record-card>p{margin:.52rem 0 0;color:var(--vp-muted);font-size:.61rem;line-height:1.5}
.goal-record-evidence{display:flex;gap:.34rem;margin-top:.55rem;overflow-x:auto}
.goal-record-evidence button{flex:0 0 54px;width:54px;height:54px;padding:0;border:0;border-radius:11px;background:#eee;overflow:hidden}
.goal-record-evidence img{width:100%;height:100%;object-fit:cover}
.goal-record-card footer{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-top:.55rem;padding-top:.5rem;border-top:1px solid #ece6df}
.goal-record-card footer>span{color:#827b73;font-size:.54rem;line-height:1.4}
.goal-record-card footer>div{display:flex;gap:.3rem}
.goal-record-card footer button{min-width:28px;padding:.28rem .42rem;border:0;border-radius:8px;color:#94645f;background:#f1e2df;font-size:.55rem}
.goal-record-card footer .goal-memory-btn.saved{color:#fff;background:#b87570}

.goal-history-row{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.7rem;margin-bottom:.5rem;padding:.72rem;border:1px solid #e1dad2;border-radius:15px;color:var(--vp-text);background:rgba(255,253,250,.82);text-align:left;cursor:pointer}
.goal-history-row.is-selected{border-color:#b8c8bb;background:#edf3ed;box-shadow:0 5px 14px rgba(75,94,80,.08)}
.goal-history-row strong,.goal-history-row span{display:block}
.goal-history-row strong{font-size:.7rem}
.goal-history-row span{margin-top:.16rem;color:var(--vp-faint);font-size:.56rem;line-height:1.4}
.goal-history-row em{flex:none;font-size:.56rem;font-style:normal;color:#718977}

/* ---------- Pigtopia habitat ---------- */
.habitat-home-card { position:relative; min-height:185px; display:grid; grid-template-columns:minmax(0,1.08fr) minmax(145px,.92fr); align-items:stretch; gap:.4rem; margin:.85rem 0; border:1px solid rgba(255,255,255,.82); border-radius:25px; color:#455149; background:linear-gradient(140deg,#edf3ee,#e0eae6 56%,#eaded3); box-shadow:0 12px 32px rgba(72,91,77,.11); overflow:hidden; cursor:pointer; }
.habitat-home-copy { position:relative; z-index:4; padding:1.15rem 0 1rem 1.1rem; }
.habitat-home-copy>span { color:#788e7e; font-size:.48rem; font-weight:850; letter-spacing:.13em; }
.habitat-home-copy>strong { display:block; margin:.38rem 0 .28rem; font-size:.94rem; }
.habitat-home-copy>p { min-height:2.6em; margin:0; color:#718078; font-size:.62rem; line-height:1.45; }
.habitat-home-progress { width:min(100%,190px); height:6px; margin-top:.72rem; border-radius:999px; background:rgba(255,255,255,.6); overflow:hidden; }
.habitat-home-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#9eafa1,#667f6d); transition:width .6s ease; }
.habitat-home-copy small { display:block; margin-top:.28rem; color:#849087; font-size:.52rem; }
.habitat-home-water { min-height:42px; margin-top:.55rem; padding:.62rem .86rem; border:0; border-radius:14px; color:#fff; background:#78917d; box-shadow:0 7px 16px rgba(74,103,82,.18); font-size:.66rem; font-weight:850; cursor:pointer; }
.habitat-home-water.done { color:#64766a; background:rgba(255,255,255,.58); }
.habitat-home-scene { position:relative; min-height:185px; overflow:hidden; }
.habitat-home-sun { position:absolute; width:35px; height:35px; top:20px; right:28px; border-radius:50%; background:#edc98e; box-shadow:0 0 0 9px rgba(255,255,255,.18); }
.habitat-home-hill { position:absolute; border-radius:50% 50% 0 0; }
.habitat-home-hill.back { width:220px;height:90px;left:-30px;bottom:18px;background:#b8c8b5;transform:rotate(-5deg); }
.habitat-home-hill.front { width:230px;height:70px;left:-15px;bottom:-12px;background:#819a82;transform:rotate(5deg); }
.habitat-home-house { position:absolute; width:78px; height:78px; left:46%; bottom:35px; transform:translateX(-50%); }
.habitat-home-house i { position:absolute; display:block; transition:opacity .45s ease,transform .45s ease; }
.habitat-home-house .wall { width:68px;height:51px;left:5px;bottom:0;border-radius:3px;background:#e7d2c1;transform-origin:center bottom; }
.habitat-home-house .roof { width:57px;height:57px;left:10px;top:0;border-radius:5px;background:#a87974;transform:rotate(45deg); }
.habitat-home-house .door { width:17px;height:29px;left:31px;bottom:0;border-radius:8px 8px 0 0;background:#97705f; }
.habitat-home-house .window { width:14px;height:15px;right:12px;bottom:20px;border:3px solid #c9915d;background:#f3cc83; }
.habitat-home-card[data-stage="0"] .habitat-home-house { opacity:.26; filter:grayscale(.5); }
.habitat-home-card[data-stage="0"] .habitat-home-house .wall { transform:scaleY(.08); }
.habitat-home-card[data-stage="0"] .habitat-home-house .roof,.habitat-home-card[data-stage="0"] .habitat-home-house .door,.habitat-home-card[data-stage="0"] .habitat-home-house .window { opacity:0; }
.habitat-home-card[data-stage="1"] .habitat-home-house .wall { transform:scaleY(.22); }
.habitat-home-card[data-stage="1"] .habitat-home-house .roof,.habitat-home-card[data-stage="1"] .habitat-home-house .door,.habitat-home-card[data-stage="1"] .habitat-home-house .window { opacity:0; }
.habitat-home-card[data-stage="2"] .habitat-home-house .door,.habitat-home-card[data-stage="2"] .habitat-home-house .window { opacity:0; }
.habitat-home-flower { position:absolute; left:14px; bottom:26px; color:#d7b17e; font-size:1.3rem; opacity:.25; transform:scale(.8); transition:.45s ease; }
.habitat-home-scene.watered .habitat-home-flower { opacity:1; transform:scale(1); }
.habitat-home-pigs { position:absolute; z-index:3; right:7px; bottom:18px; font-size:1.18rem; letter-spacing:-.3rem; animation:pigBreathe 3s ease-in-out infinite; }
.habitat-home-pigs span { display:inline-block; transform:scale(.9); }
.habitat-home-arrow { position:absolute; right:.6rem; top:50%; z-index:5; color:rgba(69,81,73,.45); font-size:1.5rem; transform:translateY(-50%); }

.page-habitat { min-height:100vh; background:linear-gradient(180deg,#f4f0ea 0,#eee9e2 100%); }
.page-habitat .topbar { position:sticky; top:0; z-index:50; }
.page-habitat .topbar-inner { display:grid; grid-template-columns:42px 1fr auto; }
.topbar-title { text-align:center; line-height:1.15; }
.topbar-title strong,.topbar-title span { display:block; }
.topbar-title strong { font-size:.88rem; }
.topbar-title span { margin-top:.18rem; color:var(--vp-faint); font-size:.46rem; font-weight:800; letter-spacing:.17em; }
.habitat-top-coin { display:flex; align-items:center; gap:.28rem; padding:.35rem .55rem; border:1px solid #eadbd0; border-radius:999px; color:var(--vp-primary); background:#faf2eb; font-size:.67rem; }
.habitat-shell { width:min(100% - 1.5rem,820px); margin:0 auto; padding:1rem 0 4rem; }
.habitat-hero-card { position:relative; border:1px solid rgba(255,255,255,.85); border-radius:30px; background:#f8f4ee; box-shadow:0 18px 55px rgba(79,67,58,.11); overflow:hidden; }
.habitat-hero-copy { position:absolute; z-index:5; top:1.25rem; left:1.35rem; max-width:52%; pointer-events:none; }
.habitat-hero-copy>span { color:#718678; font-size:.52rem; font-weight:850; letter-spacing:.15em; text-transform:uppercase; }
.habitat-hero-copy h1 { margin:.42rem 0 .38rem; color:#48534b; font-size:clamp(1.1rem,4vw,1.65rem); line-height:1.27; letter-spacing:-.03em; }
.habitat-hero-copy p { margin:0; color:#758077; font-size:.65rem; line-height:1.55; }
.habitat-scene-wrap { position:relative; min-height:360px; background:#dce8e5; overflow:hidden; }
.habitat-scene { display:block; width:100%; min-height:360px; }
.scene-project .project-blueprint { transition:opacity .5s ease; }
.scene-project [class*="requires-stage-"] { opacity:0; transition:opacity .65s ease; }
.scene-project.habitat-stage-1 .requires-stage-1,
.scene-project.habitat-stage-2 .requires-stage-1,.scene-project.habitat-stage-2 .requires-stage-2,
.scene-project.habitat-stage-3 .requires-stage-1,.scene-project.habitat-stage-3 .requires-stage-2,.scene-project.habitat-stage-3 .requires-stage-3 { opacity:1; }
.scene-project.habitat-stage-1 .project-blueprint { opacity:.23; }
.scene-project.habitat-stage-2 .project-blueprint { opacity:.1; }
.scene-project.habitat-stage-3 .project-blueprint { opacity:0; }
.scene-project.active { animation:habitatProjectGlow 3.8s ease-in-out infinite; transform-box:fill-box; transform-origin:center; }
.scene-decoration { opacity:0; transition:opacity .5s ease,transform .5s cubic-bezier(.2,.8,.2,1); transform:translateY(8px); }
.scene-decoration.owned { opacity:1; transform:none; }
.pig-accessory { opacity:0; }
.scene-pig.has-scarf .pig-scarf,.scene-pig.has-bow .pig-bow { opacity:1; }
.scene-pig { transform-box:fill-box; transform-origin:center bottom; animation:pigBreathe 3s ease-in-out infinite; }
.pig-liz { animation-delay:-1.4s; }
.habitat-cloud { animation:habitatCloud 18s ease-in-out infinite alternate; }
.cloud-two { animation-delay:-8s; }
.chimney-smoke { transform-box:fill-box; transform-origin:center; animation:habitatSmoke 3.5s ease-in-out infinite; }
.habitat-window { animation:habitatWindow 2.8s ease-in-out infinite alternate; }
.habitat-scene-wrap.night::after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(48,58,78,.42),rgba(47,59,57,.16)); mix-blend-mode:multiply; }
.habitat-scene-wrap.night .habitat-sun { fill:#eee5ce; opacity:.95; }
.habitat-scene-wrap.night .habitat-window { filter:drop-shadow(0 0 9px rgba(255,210,125,.9)); }
.habitat-material-pop { position:absolute; z-index:8; left:50%; bottom:28%; padding:.45rem .7rem; border-radius:999px; color:#fff; background:rgba(92,115,98,.92); font-size:.7rem; font-weight:800; opacity:0; transform:translate(-50%,15px); pointer-events:none; }
.habitat-material-pop.show { animation:habitatMaterialPop 2.1s ease both; }
.habitat-scene-foot { position:relative; z-index:4; min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:.8rem; padding:.7rem 1rem; border-top:1px solid rgba(255,255,255,.8); color:#748078; background:rgba(255,253,250,.75); font-size:.62rem; }
.habitat-people { display:flex; }
.habitat-people i { width:32px; height:32px; display:grid; place-items:center; margin-left:-6px; border:2px solid #faf7f2; border-radius:50%; color:#fff; background:#82988a; font-size:.5rem; font-style:normal; font-weight:750; }
.habitat-people i+ i { background:#a1849c; }

.habitat-section { margin-top:1.65rem; }
.habitat-last-section { margin-bottom:2rem; }
.habitat-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:.8rem; margin:0 .15rem .72rem; }
.habitat-heading>div>span { color:#9b8f87; font-size:.5rem; font-weight:800; letter-spacing:.13em; }
.habitat-heading h2 { margin:.16rem 0 0; font-size:1rem; }
.habitat-heading small,.habitat-heading a { color:var(--vp-muted); font-size:.61rem; text-decoration:none; }
.habitat-project-list { display:grid; gap:.65rem; }
.habitat-project-card { display:grid; grid-template-columns:48px minmax(0,1fr) auto; align-items:center; gap:.75rem; padding:.85rem; border:1px solid var(--vp-border); border-radius:21px; background:rgba(255,253,251,.9); box-shadow:var(--vp-shadow-sm); }
.habitat-project-card.active { border-color:#cbd8ce; background:linear-gradient(135deg,#fbfdfb,#eef3ee); box-shadow:0 10px 28px rgba(89,112,94,.11); }
.habitat-project-icon { width:46px; height:46px; display:grid; place-items:center; border-radius:16px; color:#728a77; background:#e8eee8; font-size:1.35rem; }
.habitat-project-main { min-width:0; }
.habitat-project-title { display:flex; align-items:center; gap:.45rem; }
.habitat-project-title strong { font-size:.77rem; }
.habitat-project-title em { padding:.16rem .35rem; border-radius:999px; color:#76877b; background:#edf1ed; font-size:.5rem; font-style:normal; }
.habitat-project-main p { margin:.24rem 0 .42rem; color:var(--vp-muted); font-size:.6rem; line-height:1.45; }
.habitat-progress { height:6px; border-radius:999px; background:#eee8e2; overflow:hidden; }
.habitat-progress i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a8b9aa,#748d79); transition:width .6s ease; }
.habitat-project-main small { display:block; margin-top:.28rem; color:var(--vp-faint); font-size:.54rem; }
.habitat-project-card>button { padding:.42rem .55rem; border:0; border-radius:10px; color:#fff; background:#829989; font-size:.57rem; font-weight:750; cursor:pointer; }
.habitat-project-active,.habitat-project-done { color:#728a77; font-size:.56rem; font-weight:800; white-space:nowrap; }
.habitat-project-done { color:#a08f82; }

.habitat-memory-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.habitat-memory-card { position:relative; display:block; padding:.42rem .42rem .7rem; border:1px solid #e5dcd5; color:var(--vp-text); background:#fffdfb; box-shadow:0 7px 20px rgba(80,65,55,.08); text-decoration:none; transform:rotate(-.7deg); }
.habitat-memory-card.memory-1,.habitat-memory-card.memory-3 { transform:rotate(.8deg); }
.habitat-memory-card img,.habitat-memory-blank { width:100%; aspect-ratio:1.22; display:grid; place-items:center; object-fit:cover; background:#ede8e2; color:#b59d91; font-size:1.6rem; }
.habitat-memory-card>div { padding:.52rem .25rem 0; }
.habitat-memory-card strong,.habitat-memory-card span { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.habitat-memory-card strong { font-size:.68rem; }
.habitat-memory-card span { margin-top:.18rem; color:var(--vp-faint); font-size:.52rem; }
.habitat-memory-card::after { content:''; position:absolute; width:28px; height:9px; left:50%; top:-5px; background:rgba(218,197,170,.65); transform:translateX(-50%) rotate(-2deg); }

.habitat-catalog { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.habitat-shop-card { display:flex; flex-direction:column; min-height:190px; padding:.85rem; border:1px solid var(--vp-border); border-radius:21px; background:var(--vp-surface); box-shadow:var(--vp-shadow-sm); }
.habitat-shop-card.owned { background:linear-gradient(145deg,#fffdfb,#f0f4ef); }
.habitat-shop-icon { width:46px; height:46px; display:grid; place-items:center; margin-bottom:.55rem; border-radius:15px; background:#f2eae2; font-size:1.45rem; }
.habitat-shop-card strong { font-size:.72rem; }
.habitat-shop-card p { min-height:2.8em; margin:.22rem 0 .7rem; color:var(--vp-muted); font-size:.57rem; line-height:1.45; }
.habitat-shop-card button { width:100%; margin-top:auto; padding:.48rem .35rem; border:0; border-radius:10px; color:white; background:#a26860; font-size:.58rem; font-weight:750; cursor:pointer; }
.habitat-shop-card button:disabled { color:#9b9189; background:#eee9e4; cursor:default; }
.habitat-activity { padding:0 .85rem; border:1px solid var(--vp-border); border-radius:22px; background:var(--vp-surface); }
.habitat-activity-row { display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:.55rem; padding:.7rem 0; border-bottom:1px solid var(--vp-border); }
.habitat-activity-row:last-child { border-bottom:0; }
.habitat-activity-row>span { width:32px; height:32px; display:grid; place-items:center; border-radius:11px; background:#f1ebe5; font-size:.92rem; }
.habitat-activity-row strong,.habitat-activity-row small { display:block; }
.habitat-activity-row strong { font-size:.66rem; }
.habitat-activity-row small { margin-top:.14rem; color:var(--vp-faint); font-size:.52rem; }
.habitat-activity-row>b { color:#718a77; font-size:.7rem; }
.habitat-empty { grid-column:1/-1; padding:1.7rem 1rem; border:1px dashed #ded4cc; border-radius:20px; color:var(--vp-faint); background:rgba(255,253,251,.55); text-align:center; font-size:.64rem; line-height:1.6; }

@keyframes habitatCloud { to { transform:translateX(22px); } }
@keyframes pigBreathe { 0%,100%{translate:0 0}50%{translate:0 -3px} }
@keyframes habitatSmoke { 0%,100%{opacity:.28;translate:0 5px}50%{opacity:.55;translate:5px -5px} }
@keyframes habitatWindow { from{opacity:.78}to{opacity:1} }
@keyframes habitatProjectGlow { 0%,100%{filter:none}50%{filter:drop-shadow(0 0 6px rgba(245,211,145,.45))} }
@keyframes habitatMaterialPop { 0%{opacity:0;transform:translate(-50%,15px) scale(.9)}18%,68%{opacity:1;transform:translate(-50%,0) scale(1)}100%{opacity:0;transform:translate(-50%,-18px) scale(.98)} }

@media(min-width:680px) {
    .habitat-memory-grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .habitat-catalog { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .habitat-scene-wrap,.habitat-scene { min-height:440px; }
}
@media(max-width:520px) {
    .habitat-home-card { grid-template-columns:minmax(0,1.15fr) minmax(125px,.85fr); min-height:175px; }
    .habitat-home-scene { min-height:175px; }
    .habitat-home-copy { padding:1rem 0 .9rem .95rem; }
    .habitat-home-copy>p { max-width:190px; }
    .habitat-shell { width:min(100% - 1rem,820px); }
    .habitat-hero-copy { top:1rem; left:1rem; max-width:72%; }
    .habitat-hero-copy h1 { font-size:1.1rem; }
    .habitat-hero-copy p { max-width:220px; font-size:.57rem; }
    .habitat-scene-wrap,.habitat-scene { min-height:330px; }
    .habitat-project-card { grid-template-columns:42px minmax(0,1fr); }
    .habitat-project-icon { width:42px;height:42px; }
    .habitat-project-card>button,.habitat-project-active,.habitat-project-done { grid-column:2; justify-self:start; }
}

/* ---------- Habitat v2 · interactive H5 world ---------- */
.habitat-v2 .habitat-v2-shell { width:min(100% - 1.5rem,980px); }
.habitat-world-card { position:relative; min-height:620px; border:1px solid rgba(255,255,255,.9); border-radius:32px; background:#dfe8e3; box-shadow:0 22px 62px rgba(64,78,67,.16); overflow:hidden; isolation:isolate; }
.habitat-world-copy { position:absolute; z-index:5; top:1.35rem; left:1.45rem; max-width:390px; pointer-events:none; text-shadow:0 1px 0 rgba(255,255,255,.45); }
.habitat-world-copy>span { color:#657b6c; font-size:.5rem; font-weight:900; letter-spacing:.16em; }
.habitat-world-copy h1 { margin:.42rem 0 .36rem; color:#3f4d44; font-size:clamp(1.2rem,3.4vw,1.8rem); line-height:1.22; letter-spacing:-.035em; }
.habitat-world-copy p { max-width:350px; margin:0; color:#637268; font-size:.66rem; line-height:1.5; }
.habitat-world-card.is-night .habitat-world-copy { text-shadow:0 1px 12px rgba(32,42,50,.28); }
.habitat-world-card.is-night .habitat-world-copy>span { color:#b9ccc2; }
.habitat-world-card.is-night .habitat-world-copy h1 { color:#f5f1e9; }
.habitat-world-card.is-night .habitat-world-copy p { color:#d0d9d2; }
.habitat-world-stage { position:relative; height:620px; overflow:hidden; background:radial-gradient(circle at 77% 20%,rgba(255,248,220,.74),transparent 21%),linear-gradient(180deg,#cfdfdf 0%,#e6e4d9 56%,#dbcbbd 100%); transition:background .45s ease; }
.habitat-world-card.is-night .habitat-world-stage { background:radial-gradient(circle at 78% 17%,rgba(248,229,187,.28),transparent 17%),linear-gradient(180deg,#3f4b60 0%,#65737b 55%,#9b8580 100%); }
#habitatWorldCanvas { display:block; width:100%; height:100%; touch-action:none; cursor:grab; -webkit-tap-highlight-color:transparent; }
#habitatWorldCanvas:active { cursor:grabbing; }
.habitat-scene-loading { position:absolute; z-index:3; inset:0; display:flex; align-items:center; justify-content:center; gap:.5rem; color:#687a6e; background:linear-gradient(180deg,rgba(222,233,228,.84),rgba(235,222,211,.76)); backdrop-filter:blur(7px); font-size:.56rem; font-weight:800; letter-spacing:.04em; transition:opacity .55s ease,visibility .55s ease; pointer-events:none; }
.habitat-scene-loading i { width:25px; height:13px; border-radius:50%; background:#8ca08e; box-shadow:0 -7px 0 -2px #d2b4a3,9px -2px 0 -4px #edcf88; animation:habitatIslandFloat 1.25s ease-in-out infinite alternate; }
.habitat-scene-loading.done { opacity:0; visibility:hidden; }
.habitat-renderer-badge { position:absolute; z-index:6; top:3.72rem; right:1rem; display:flex; align-items:center; gap:.3rem; padding:.34rem .48rem; border:1px solid rgba(255,255,255,.64); border-radius:999px; color:#617268; background:rgba(255,253,249,.62); box-shadow:0 7px 20px rgba(62,77,67,.08); backdrop-filter:blur(10px); pointer-events:none; }
.habitat-renderer-badge>i { width:6px; height:6px; border-radius:50%; background:#86a68e; box-shadow:0 0 0 3px rgba(134,166,142,.16); }
.habitat-renderer-badge>span { font-size:.47rem; font-weight:850; }
.habitat-renderer-badge>small { color:#8a958e; font-size:.43rem; }
.habitat-renderer-badge[data-renderer="canvas"]>i { background:#c0a16b; box-shadow:0 0 0 3px rgba(192,161,107,.15); }
.habitat-renderer-badge[data-renderer="paused"]>i { background:#b97168; box-shadow:0 0 0 3px rgba(185,113,104,.15); }
.habitat-world-help { position:absolute; z-index:4; top:1rem; right:1rem; display:flex; align-items:center; gap:.42rem; padding:.38rem .58rem; border:1px solid rgba(255,255,255,.65); border-radius:999px; color:#637269; background:rgba(255,253,249,.58); box-shadow:0 6px 18px rgba(60,77,65,.08); backdrop-filter:blur(10px); font-size:.5rem; font-weight:750; pointer-events:none; }
.habitat-world-help i { width:3px; height:3px; border-radius:50%; background:#91a296; }
.habitat-world-home-btn { position:absolute; z-index:6; right:1rem; top:3.75rem; width:38px; height:38px; border:1px solid rgba(255,255,255,.7); border-radius:14px; color:#607468; background:rgba(255,253,249,.72); box-shadow:0 7px 20px rgba(62,77,67,.1); font-size:1.15rem; cursor:pointer; backdrop-filter:blur(10px); }
.habitat-world-status { position:absolute; z-index:4; right:1rem; bottom:1rem; display:flex; align-items:center; gap:1rem; min-width:230px; padding:.7rem .8rem; border:1px solid rgba(255,255,255,.72); border-radius:18px; color:#46564c; background:rgba(255,253,249,.72); box-shadow:0 10px 30px rgba(58,74,63,.12); backdrop-filter:blur(12px); pointer-events:none; }
.habitat-world-status small,.habitat-world-status strong,.habitat-world-week b,.habitat-world-week span { display:block; }
.habitat-world-status small { color:#809087; font-size:.5rem; }
.habitat-world-status strong { margin-top:.13rem; font-size:.72rem; }
.habitat-world-week { margin-left:auto; text-align:right; }
.habitat-world-week b { color:#6a8371; font-size:.78rem; }
.habitat-world-week span { margin-top:.1rem; color:#829087; font-size:.48rem; }
.habitat-world-foot { min-height:48px; display:flex; align-items:center; justify-content:space-between; gap:.7rem; padding:.7rem 1rem; border-top:1px solid rgba(255,255,255,.85); color:#6f7d74; background:rgba(255,253,250,.82); font-size:.6rem; }
.habitat-water-btn { padding:.42rem .58rem; border:0; border-radius:12px; color:#fff; background:#78917d; font-size:.54rem; font-weight:800; cursor:pointer; white-space:nowrap; }
.habitat-water-btn:disabled { color:#718076; background:#e7eee8; cursor:default; }

.habitat-building-sheet { position:absolute; z-index:12; left:1rem; bottom:4.9rem; width:min(380px,calc(100% - 2rem)); padding:1rem 1.05rem; border:1px solid rgba(255,255,255,.85); border-radius:24px; color:#445149; background:rgba(255,252,248,.9); box-shadow:0 18px 52px rgba(48,63,52,.2); backdrop-filter:blur(18px); animation:habitatSheetIn .28s cubic-bezier(.2,.8,.2,1) both; }
.habitat-sheet-close { position:absolute; right:.7rem; top:.65rem; width:30px; height:30px; border:0; border-radius:10px; color:#7f8982; background:#eeeae5; font-size:1.1rem; cursor:pointer; }
.habitat-sheet-kicker { color:#718879; font-size:.48rem; font-weight:850; letter-spacing:.12em; }
.habitat-building-sheet h2 { margin:.22rem 2.1rem .28rem 0; font-size:1.02rem; }
.habitat-building-sheet p { margin:0 0 .7rem; color:#6f7972; font-size:.61rem; line-height:1.5; }
.habitat-sheet-level { display:flex; align-items:center; justify-content:space-between; gap:.8rem; }
.habitat-sheet-level strong { color:#657e6c; font-size:.72rem; }
.habitat-sheet-level span { color:#7c8880; font-size:.54rem; text-align:right; }
.habitat-sheet-progress { height:7px; margin:.48rem 0 .25rem; border-radius:999px; background:#e9e6df; overflow:hidden; }
.habitat-sheet-progress i { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#a4b6a7,#687f6e); transition:width .5s ease; }
.habitat-building-sheet>small { color:#8a948d; font-size:.52rem; }

.habitat-track-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.habitat-track-card { --track:#829b88; display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:.72rem; width:100%; padding:.85rem; border:1px solid var(--vp-border); border-radius:21px; color:var(--vp-text); background:linear-gradient(140deg,#fffdfb,#f6f3ef); box-shadow:var(--vp-shadow-sm); text-align:left; cursor:pointer; transition:transform .16s ease,box-shadow .2s ease,border-color .2s ease; }
.habitat-track-card:hover { transform:translateY(-2px); border-color:color-mix(in srgb,var(--track) 35%,white); box-shadow:0 13px 30px rgba(70,78,71,.1); }
.habitat-track-card:active { transform:scale(.98); }
.habitat-track-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:15px; color:#fff; background:var(--track); box-shadow:inset 0 1px 0 rgba(255,255,255,.38); font-size:1.15rem; }
.habitat-track-card>div { min-width:0; }
.habitat-track-card small,.habitat-track-card strong,.habitat-track-card em { display:block; }
.habitat-track-card small { color:var(--track); font-size:.5rem; font-weight:800; }
.habitat-track-card strong { margin-top:.12rem; font-size:.72rem; }
.habitat-track-card p { height:2.7em; margin:.2rem 0 .45rem; overflow:hidden; color:var(--vp-muted); font-size:.55rem; line-height:1.38; }
.habitat-track-progress { height:5px; border-radius:999px; background:#eee9e4; overflow:hidden; }
.habitat-track-progress i { display:block; height:100%; border-radius:inherit; background:var(--track); }
.habitat-track-card em { margin-top:.25rem; color:var(--vp-faint); font-size:.49rem; font-style:normal; }
.habitat-track-card>b { color:#a5aaa6; font-size:1.1rem; }
.goal-rule-strip { display:flex; align-items:center; justify-content:space-between; gap:.8rem; margin-bottom:.7rem; padding:.72rem .85rem; border:1px solid #dbe4dc; border-radius:17px; color:#617466; background:linear-gradient(135deg,#f5f8f4,#eaf0ea); }
.goal-rule-strip b { font-size:.68rem; white-space:nowrap; }
.goal-rule-strip span { color:#748078; font-size:.55rem; text-align:right; line-height:1.4; }
.goal-plan-summary.danger { color:#9e625c; background:#f5e5e2; }

@keyframes habitatSheetIn { from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none} }
@keyframes habitatIslandFloat { from{transform:translateY(2px) rotate(-2deg)}to{transform:translateY(-3px) rotate(2deg)} }

@media(min-width:900px){.habitat-track-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:620px){
    .habitat-v2 .habitat-v2-shell { width:min(100% - .8rem,980px); padding-top:.55rem; }
    .habitat-world-card { min-height:540px; border-radius:27px; }
    .habitat-world-stage { height:540px; }
    .habitat-world-copy { top:.9rem; left:1rem; max-width:72%; }
    .habitat-world-copy h1 { font-size:1.12rem; }
    .habitat-world-copy p { font-size:.55rem; }
    .habitat-world-help { top:auto; right:auto; left:.8rem; bottom:4.75rem; }
    .habitat-world-home-btn { top:.8rem; right:.8rem; }
    .habitat-renderer-badge { top:3.55rem; right:.8rem; }
    .habitat-world-status { right:.7rem; bottom:.7rem; min-width:205px; padding:.62rem .7rem; }
    .habitat-world-foot { font-size:.53rem; }
    .habitat-building-sheet { left:.65rem; bottom:4.45rem; width:calc(100% - 1.3rem); border-radius:20px; }
    .habitat-track-grid { grid-template-columns:1fr; }
    .habitat-track-card p { height:auto; }
    .goal-rule-strip { align-items:flex-start; flex-direction:column; gap:.22rem; }
    .goal-rule-strip span { text-align:left; }
}

/* Weekly life planner */
.page-weekly{min-height:100vh;background:linear-gradient(180deg,#f5f1ed,#f8f5f2 42%,#eef3ef)}
.weekly-goal-link{align-self:center;padding:.38rem .62rem;border:1px solid #ddd4cd;border-radius:999px;color:#756b65;background:#fffdfa;font-size:.57rem;font-weight:750;text-decoration:none}
.weekly-shell{width:min(100% - 1.4rem,960px);margin:auto;padding:.75rem 0 4rem}
.weekly-weekbar{display:grid;grid-template-columns:42px minmax(0,1fr) 42px auto;align-items:center;gap:.48rem;margin-bottom:.65rem;padding:.48rem;border:1px solid #ded6cf;border-radius:22px;background:rgba(255,253,250,.82);box-shadow:0 9px 28px rgba(84,72,63,.07)}
.weekly-arrow{width:42px;height:42px;border:0;border-radius:15px;color:#697c6d;background:#e8eee9;font:1.65rem/1 Georgia;cursor:pointer}.weekly-arrow:active{transform:scale(.92)}
.weekly-week-title{text-align:center;min-width:0}.weekly-week-title span,.weekly-week-title strong{display:block}.weekly-week-title span{color:#9b8f87;font-size:.47rem;font-weight:850;letter-spacing:.16em}.weekly-week-title strong{margin-top:.15rem;overflow:hidden;color:#4e4a46;font-size:.76rem;text-overflow:ellipsis;white-space:nowrap}
.weekly-jump{padding:.52rem .68rem;border:0;border-radius:13px;color:#fff;background:#8f776d;font-size:.57rem;font-weight:800;cursor:pointer}
.weekly-hero{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:150px;padding:1.25rem 1.35rem;border:1px solid #fff;border-radius:29px;color:#4b5a50;background:radial-gradient(circle at 82% 20%,rgba(255,255,255,.75),transparent 34%),linear-gradient(135deg,#dfeae2,#eaded5 68%,#e9d5ce);box-shadow:0 18px 46px rgba(75,83,73,.12);overflow:hidden}.weekly-hero>div{position:relative;z-index:1}.weekly-hero>div>span{font-size:.5rem;font-weight:900;letter-spacing:.17em}.weekly-hero h2{margin:.34rem 0 .28rem;font-size:clamp(1.15rem,4.5vw,1.75rem);letter-spacing:-.04em}.weekly-hero p{max-width:520px;margin:0;color:#667269;font-size:.62rem;line-height:1.55}
.weekly-hero-stamp{flex:0 0 auto;width:86px;height:86px;display:grid;place-content:center;border:1px solid #fff;border-radius:50%;background:rgba(255,253,250,.58);box-shadow:0 12px 30px rgba(86,74,65,.1);text-align:center}.weekly-hero-stamp b,.weekly-hero-stamp small{display:block}.weekly-hero-stamp b{color:#718476;font-size:1.03rem}.weekly-hero-stamp small{color:#8d7d75;font-size:.47rem}
.weekly-pair-grid,.weekly-goal-mini{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin:.75rem 0}.weekly-person{padding:.92rem;border:1px solid #e3dcd6;border-radius:23px;background:#fffdfb;box-shadow:0 10px 30px rgba(83,71,62,.07)}.weekly-person.liz{background:linear-gradient(145deg,#fffdfb,#f5eeee)}.weekly-person.reached{border-color:#cad9ce;background:linear-gradient(145deg,#fffdfb,#edf4ee)}
.weekly-person-head{display:grid;grid-template-columns:39px minmax(0,1fr) auto;align-items:center;gap:.58rem}.weekly-avatar{width:39px;height:39px;display:grid;place-items:center;border-radius:14px;color:#fff;background:#809486;font-size:.74rem;font-weight:900}.weekly-person.liz .weekly-avatar{background:#a37f78}.weekly-person-head span,.weekly-person-head strong{display:block}.weekly-person-head span{color:#9a8d86;font-size:.46rem;font-weight:850}.weekly-person-head strong{font-size:.67rem}.weekly-person-head>b{color:#6f8375;font-size:.8rem}.weekly-person-progress{height:6px;margin:.72rem 0 .55rem;border-radius:99px;background:#eee9e4;overflow:hidden}.weekly-person-progress i{display:block;height:100%;background:#78907d}.weekly-person-stats{display:flex;justify-content:space-between;color:#8c837d;font-size:.5rem}.weekly-person>p{margin:.55rem 0 0;padding-top:.5rem;border-top:1px dashed #e7dfd8;color:#968a82;font-size:.51rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.weekly-tabs{display:flex;gap:.3rem;margin:.2rem 0 .75rem;padding:.28rem;border:1px solid #e2dbd4;border-radius:16px;background:#fffdfa}.weekly-tabs button{flex:1;padding:.58rem;border:0;border-radius:12px;color:#8d8179;background:transparent;font-size:.62rem;font-weight:800}.weekly-tabs button.active{color:#fff;background:#7d8f81}.weekly-panel{display:none}.weekly-panel.active{display:block;animation:weeklyFade .25s ease}@keyframes weeklyFade{from{opacity:0;transform:translateY(5px)}to{opacity:1}}
.weekly-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin:1rem .1rem .6rem}.weekly-section-head>div>span{color:#988c84;font-size:.47rem;font-weight:900;letter-spacing:.15em}.weekly-section-head h3{margin:.18rem 0 .12rem;font-size:.94rem}.weekly-section-head p{margin:0;color:#948a83;font-size:.53rem}.weekly-section-head>a,.weekly-add{padding:.48rem .62rem;border:1px solid #d8ded9;border-radius:12px;color:#6f8375;background:#f3f7f3;font-size:.53rem;font-weight:800;text-decoration:none}.weekly-add{border:0;color:#fff;background:#8f756d}
.weekly-goal-mini article{padding:.8rem;border:1px solid #e5ddd7;border-radius:19px;background:#fffdfb}.weekly-goal-mini header{display:flex;justify-content:space-between;margin-bottom:.5rem}.weekly-goal-mini header strong{font-size:.65rem}.weekly-goal-mini header small{color:#8f847d;font-size:.49rem}.weekly-goal-mini article>div{display:flex;flex-wrap:wrap;gap:.32rem}.weekly-goal-mini article>div span{padding:.31rem .42rem;border-radius:9px;color:#69766d;background:#edf2ed;font-size:.49rem}.weekly-goal-mini em{color:#a2958c;font-size:.52rem;font-style:normal}
.weekly-selected-list{display:grid;gap:.68rem}.weekend-selected{position:relative;padding:1rem;border:1px solid #e1d8d1;border-radius:23px;background:linear-gradient(145deg,#fffdfa,#f7f2ed);box-shadow:0 9px 27px rgba(81,68,58,.07);overflow:hidden}.weekend-selected:before{content:'';position:absolute;inset:0 auto 0 0;width:4px;background:#aa897d}.weekend-selected.unlocked:before{background:#78917d}.weekend-selected.completed:before{background:#d09d61}.weekend-selected.locked:before{background:#8a899c}.weekend-selected header{display:flex;justify-content:space-between;gap:.8rem}.weekend-selected header span{color:#a28e83;font-size:.47rem}.weekend-selected h4{margin:.16rem 0;font-size:.79rem}.weekend-selected header>b{padding:.25rem .45rem;border-radius:999px;color:#856f65;background:#efe5de;font-size:.48rem;white-space:nowrap}.weekend-selected>p{color:#786f69;font-size:.57rem}.weekend-meta{display:flex;flex-wrap:wrap;gap:.35rem .7rem;color:#9a8e86;font-size:.49rem}.weekend-unlock{display:flex;justify-content:space-between;margin:.65rem 0;padding:.5rem .62rem;border-radius:13px;color:#6c7470;background:#edf0f0;font-size:.5rem}
.weekend-main-action,.weekend-secondary{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:.62rem .58rem;border:0;border-radius:14px;color:#fff;background:#78907d;font-size:.58rem;font-weight:800;line-height:1.25;text-align:center;text-decoration:none}.weekend-main-action:disabled,.weekend-secondary:disabled{cursor:wait;opacity:.68}.weekend-secondary{border:1px solid #dcd4cd;color:#766b64;background:#fffdfa}.weekend-main-action.memory{background:#a5766c}.weekend-main-action.memory.saved{background:#8b5f58}.weekend-action-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;margin-top:.7rem}.weekend-cancel{display:block;margin:.55rem auto 0;border:0;color:#a3958c;background:transparent;font-size:.52rem;text-decoration:underline}.weekend-ready-row{display:grid;grid-template-columns:1fr 1fr;gap:.4rem;margin-top:.65rem}.weekend-ready-row span{padding:.42rem;border:1px dashed #ddd4cd;border-radius:11px;color:#a1948b;font-size:.5rem;text-align:center}.weekend-ready-row span.ready{border-style:solid;border-color:#cdddcf;color:#637968;background:#eaf1eb}
.weekly-subhead{display:flex;justify-content:space-between;margin:1rem .1rem .55rem}.weekly-subhead strong{font-size:.69rem}.weekly-subhead span{color:#9b8f87;font-size:.5rem}.weekly-candidate-grid,.achievement-board{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.62rem}.weekend-candidate{display:grid;grid-template-columns:42px minmax(0,1fr);gap:.6rem;padding:.78rem;border:1px solid #e3dcd6;border-radius:20px;background:#fffdfb}.candidate-icon{grid-row:1/3;width:42px;height:42px;display:grid;place-items:center;border-radius:14px;background:#eee7df;font-size:1.12rem}.weekend-candidate span{color:#9e8f86;font-size:.46rem}.weekend-candidate h4{margin:.14rem 0;font-size:.66rem}.weekend-candidate p{height:2.7em;margin:0;overflow:hidden;color:#958a83;font-size:.5rem}.weekend-candidate>button{grid-column:2;justify-self:start;padding:.4rem .55rem;border:0;border-radius:10px;color:#fff;background:#8b9a8e;font-size:.5rem}.weekly-empty{grid-column:1/-1;display:grid;gap:.22rem;padding:1.5rem;border:1px dashed #dcd2ca;border-radius:20px;color:#9b8e86;text-align:center;font-size:.56rem}
.achievement-filter{display:flex;gap:.32rem;overflow-x:auto;padding:.12rem 0 .5rem}.achievement-filter button{flex:0 0 auto;padding:.42rem .58rem;border:1px solid #dfd7d0;border-radius:999px;color:#8a7e77;background:#fffdfa;font-size:.5rem}.achievement-filter button.active{color:#fff;background:#839789}.achievement-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:.7rem;padding:.82rem;border:1px solid #e4ddd7;border-radius:21px;filter:grayscale(.65);opacity:.68;background:#fffdfb}.achievement-card.earned{filter:none;opacity:1;box-shadow:0 9px 26px rgba(82,70,60,.07)}.achievement-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:17px;background:#eee7df;font-size:1.35rem}.achievement-card.shared .achievement-icon{background:#e2ebe4}.achievement-card span{color:#9b8e85;font-size:.45rem}.achievement-card h4{margin:.12rem 0;font-size:.66rem}.achievement-card p{height:2.6em;margin:0;color:#92877f;font-size:.49rem;overflow:hidden}.achievement-card small{display:block;color:#978b83;font-size:.46rem}.achievement-progress{height:5px;margin-top:.48rem;border-radius:999px;background:#eae5e0;overflow:hidden}.achievement-progress i{display:block;height:100%;background:#809486}
.weekly-modal{position:fixed;z-index:1000;inset:0;display:flex;align-items:flex-end;justify-content:center}.weekly-modal.hidden{display:none}.weekly-modal-mask{position:absolute;inset:0;background:rgba(52,47,44,.46);backdrop-filter:blur(3px)}.weekly-sheet{position:relative;z-index:1;width:min(100%,620px);max-height:88vh;padding:1.1rem;border-radius:28px 28px 0 0;background:#faf7f3;box-shadow:0 -18px 60px rgba(47,42,39,.2);overflow-y:auto}.weekly-sheet-head{display:flex;justify-content:space-between;margin-bottom:.85rem}.weekly-sheet-head span{color:#9d8e85;font-size:.47rem;font-weight:900}.weekly-sheet-head h3{margin:.16rem 0;font-size:.92rem}.weekly-sheet-head>button{width:32px;height:32px;border:0;border-radius:11px;background:#eee7e1;font-size:1.1rem}.weekly-sheet form,.weekly-sheet.compact-sheet{display:grid;gap:.7rem}.weekly-sheet label{display:grid;gap:.3rem;color:#716863;font-size:.54rem;font-weight:750}.weekly-sheet input,.weekly-sheet select,.weekly-sheet textarea{width:100%;padding:.68rem;border:1px solid #ddd5ce;border-radius:13px;background:#fffdfa;box-sizing:border-box}.weekly-form-grid,.weekly-sheet-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.week-picker-labels,.week-picker-wheels{display:grid;grid-template-columns:1fr 1fr}.week-picker-labels{color:#9b8e85;font-size:.49rem;text-align:center}.week-picker-wheels{position:relative;height:250px;overflow:hidden}.week-wheel{z-index:2;overflow-y:auto;scroll-snap-type:y mandatory;scrollbar-width:none}.week-wheel button{width:100%;height:48px;border:0;color:#958a82;background:transparent;font-size:.7rem;scroll-snap-align:center}.week-wheel button.selected{color:#48564d;font-size:.8rem;font-weight:850}.wheel-spacer{height:101px}.week-picker-focus{position:absolute;z-index:1;left:0;right:0;top:101px;height:48px;border-block:1px solid #d9d2cb;background:rgba(255,255,255,.42)}.week-picker-preview{min-height:1.1rem;color:#6f7d73;font-size:.58rem;text-align:center}
@media(min-width:760px){.weekly-selected-list{grid-template-columns:repeat(2,minmax(0,1fr))}.weekly-candidate-grid,.achievement-board{grid-template-columns:repeat(3,minmax(0,1fr))}.weekly-sheet{margin-bottom:2vh;border-radius:28px}}
@media(max-width:620px){.weekly-shell{width:calc(100% - .8rem)}.weekly-weekbar{grid-template-columns:38px minmax(0,1fr) 38px auto}.weekly-arrow{width:38px;height:38px}.weekly-week-title strong{font-size:.63rem}.weekly-hero{min-height:128px;padding:1rem}.weekly-hero h2{font-size:1.08rem}.weekly-hero p{font-size:.52rem}.weekly-hero-stamp{width:70px;height:70px}.weekly-pair-grid{gap:.42rem}.weekly-person{padding:.65rem}.weekly-person-head{grid-template-columns:31px minmax(0,1fr)}.weekly-avatar{width:31px;height:31px}.weekly-person-head>b{grid-column:1/-1}.weekly-person-stats{display:grid;gap:.13rem}.weekly-person>p{display:none}.weekly-goal-mini,.weekly-candidate-grid,.achievement-board{grid-template-columns:1fr}.weekly-section-head{align-items:flex-start}.weekly-form-grid{grid-template-columns:1fr}.achievement-card p{height:auto}}

/* ---------- Wild: one-off weekly plans, ownership and invitations ---------- */
.wild-plan-group{display:grid;gap:.5rem;padding:.58rem;border:1px solid #e7dfd8;border-radius:22px;background:rgba(251,248,244,.68)}
.wild-plan-group>header{display:flex;align-items:flex-end;justify-content:space-between;gap:.7rem;padding:.05rem .26rem}
.wild-plan-group>header strong{color:#5f5752;font-size:.68rem}
.wild-plan-group>header span{max-width:62%;color:#a0958d;font-size:.47rem;line-height:1.35;text-align:right}
.wild-plan-group>div{display:grid;gap:.58rem}
.weekend-selected.invited:before{background:#b89a72}
.weekend-selected.declined,.weekend-selected.cancelled,.weekend-selected.carried,.weekend-selected.missed{opacity:.72;box-shadow:none}
.weekend-invitation{display:grid;gap:.42rem;margin-top:.7rem;padding:.6rem;border:1px solid #eadbc3;border-radius:14px;background:#fff8eb}
.weekend-invitation p{margin:0;color:#7c6954;font-size:.53rem}
.weekend-invitation.waiting{display:block;color:#8b755f;font-size:.52rem;text-align:center}
.weekend-complete-action{width:100%;margin-top:.7rem}
.weekend-ready-row.single{grid-template-columns:1fr}
.weekend-manage-row{padding-top:.02rem;border-top:1px dashed #e2dad4}
.weekend-manage-row .weekend-cancel{margin:0;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.weekly-sheet label small{color:#9d928a;font-size:.46rem;font-weight:500;line-height:1.45}
/* The product deliberately keeps one phone-first composition at every width. */
@media(min-width:621px){
    .preview-home .home-shell,.piggy-shell,.habitat-v2 .habitat-v2-shell,.weekly-shell{width:min(calc(100% - .8rem),480px);max-width:480px}
    .weekly-goal-mini,.weekly-selected-list,.weekly-candidate-grid,.achievement-board{grid-template-columns:1fr}
    .weekly-sheet{width:min(calc(100% - 1rem),480px);margin-bottom:2vh;border-radius:28px}
    .habitat-track-grid{grid-template-columns:1fr}
    .habitat-world-card{min-height:540px;border-radius:27px}.habitat-world-stage{height:540px}
    .habitat-world-copy{top:.9rem;left:1rem;max-width:72%}.habitat-world-copy h1{font-size:1.12rem}.habitat-world-copy p{font-size:.55rem}
    .habitat-world-help{top:auto;right:auto;left:.8rem;bottom:4.75rem}.habitat-world-home-btn{top:.8rem;right:.8rem}.habitat-renderer-badge{top:3.55rem;right:.8rem}
    .habitat-world-status{right:.7rem;bottom:.7rem;min-width:205px;padding:.62rem .7rem}.habitat-building-sheet{left:.65rem;bottom:4.45rem;width:calc(100% - 1.3rem);border-radius:20px}
    .piggy-reward-grid,.piggy-badge-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.goal-memory-btn{padding:.32rem .45rem;border:1px solid #e0d4cd;border-radius:999px;color:#98766e;background:#fffaf7;font-size:.48rem;white-space:nowrap}.goal-memory-btn.saved{color:#8a5f57;background:#f5e6e3}
.memory-wall-shell{width:min(100% - 1rem,980px);margin:auto;padding:.8rem 0 4rem}.memory-wall-hero{padding:1.25rem;border:1px solid #fff;border-radius:27px;background:linear-gradient(135deg,#e4ece6,#efe1d8);box-shadow:0 14px 38px rgba(76,69,62,.1)}.memory-wall-hero span{color:#738276;font-size:.48rem;font-weight:900;letter-spacing:.15em}.memory-wall-hero h2{margin:.28rem 0;font-size:1.15rem}.memory-wall-hero p{margin:0;color:#7c7772;font-size:.57rem}.memory-wall-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem;margin-top:.8rem}.memory-wall-card{padding:.42rem;border:1px solid #e4dbd3;background:#fffdfb;box-shadow:0 8px 25px rgba(75,62,53,.08);transform:rotate(-.35deg)}.memory-wall-card:nth-child(2n){transform:rotate(.4deg)}.memory-wall-card>a img,.memory-wall-blank{width:100%;aspect-ratio:1.24;display:grid;place-items:center;object-fit:cover;background:#eee7e1;color:#aa8e82;font-size:1.5rem}.memory-wall-card>div{padding:.62rem .34rem .35rem}.memory-wall-card span,.memory-wall-card small{color:#9a8d85;font-size:.48rem}.memory-wall-card h3{min-height:2.6em;margin:.2rem 0;font-size:.65rem;line-height:1.35}.memory-wall-card button{margin-top:.42rem;padding:.35rem .48rem;border:1px solid #e0d3cc;border-radius:999px;color:#98766e;background:#fff9f6;font-size:.48rem}.memory-wall-card button.saved{color:#865c55;background:#f6e7e3}@media(min-width:760px){.memory-wall-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}