:root {
    --life-paper: #fffdfd;
    --life-paper-soft: rgba(255, 253, 253, 0.99);
    --life-ink: #30384b;
    --life-ink-soft: #667189;
    --life-ink-faint: #a2aabd;
    --life-blue: #6d8ed0;
    --life-blue-soft: #eef3ff;
    --life-blue-pale: #f7f9ff;
    --life-pink: #d474aa;
    --life-pink-soft: #fff0f7;
    --life-rule: #e4e8f2;
    --life-rule-soft: #f1f0f7;
    --life-panel-shadow: 0 24px 70px rgba(88, 103, 157, 0.16), 0 2px 0 rgba(255, 255, 255, 0.86) inset;
}

.portal-panel,
.deep-sky-card {
    --paper: var(--life-paper);
    --paper-soft: var(--life-paper-soft);
    --ink: var(--life-ink);
    --ink-soft: var(--life-ink-soft);
    --ink-faint: var(--life-ink-faint);
    --rule: var(--life-rule);
    border: 1px solid rgba(228, 232, 242, 0.96);
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 0%, rgba(212, 116, 170, 0.11), transparent 34%),
        radial-gradient(circle at 0% 100%, rgba(109, 142, 208, 0.1), transparent 38%),
        var(--life-paper-soft);
    color: var(--life-ink);
    box-shadow: var(--life-panel-shadow);
    backdrop-filter: blur(20px) saturate(1.08);
}

.portal-panel-header {
    border-bottom-color: var(--life-rule-soft);
}

.portal-panel-kicker {
    color: var(--life-blue);
}

.portal-panel-title {
    color: var(--life-pink);
}

.portal-panel-names {
    color: var(--life-ink-faint);
}

.portal-panel-hint {
    color: var(--life-ink-soft);
}

.portal-close {
    border-color: rgba(109, 142, 208, 0.24);
    background: var(--life-blue-pale);
    color: var(--life-blue);
}

.portal-close:hover,
.portal-close:focus-visible {
    border-color: rgba(212, 116, 170, 0.52);
    background: var(--life-pink-soft);
    color: var(--life-pink);
}

.portal-panel-body {
    scrollbar-color: rgba(109, 142, 208, 0.34) transparent;
}

.portal-panel-body::-webkit-scrollbar-thumb {
    background: rgba(109, 142, 208, 0.34);
}

@media (max-aspect-ratio: 3/2), (max-width: 1024px) and (max-aspect-ratio: 16/9) {
    .portal-panel:has(#profile:not([hidden])) {
        max-height: calc(100dvh - 112px);
    }
}

.portal-content.homepage-parity {
    --bg-alt: #ffffff;
    --text: var(--life-ink);
    --text-secondary: var(--life-ink-soft);
    --text-muted: var(--life-ink-faint);
    --border: var(--life-rule);
    --border-light: var(--life-rule-soft);
    --shadow: 0 1px 3px rgba(88, 103, 157, 0.04), 0 8px 24px rgba(190, 132, 166, 0.045);
    --shadow-hover: 0 10px 30px rgba(98, 119, 183, 0.12);
}

.portal-panel .portal-moment + .portal-moment {
    border-top-color: var(--life-rule-soft);
}

.portal-panel .portal-moment h3 {
    color: var(--life-ink);
}

.portal-panel .portal-moment-meta,
.portal-panel .thought-date {
    color: var(--life-ink-soft);
}

.portal-panel .news-item {
    padding: 12px 14px;
    border: 1px solid var(--life-rule-soft);
    border-radius: 12px;
    background: linear-gradient(110deg, var(--life-blue-soft), var(--life-pink-soft));
    flex-wrap: wrap;
    gap: 4px 16px;
}

.portal-panel .news-date {
    color: var(--life-blue);
}

.portal-panel .pub-list {
    gap: 12px;
}

.portal-panel .pub-item {
    padding: 16px 18px;
    border: 1px solid var(--life-rule-soft);
    border-radius: 12px;
    background: #ffffff;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.portal-panel .pub-item:hover {
    border-color: #d5dfec;
    box-shadow: var(--shadow);
}

.portal-panel .pub-venue {
    color: var(--life-pink);
}

.portal-panel .pub-actions,
.portal-panel .project-links {
    flex-wrap: wrap;
}

.portal-panel .gallery-item {
    border-radius: 10px;
    box-shadow: 0 6px 20px rgba(88, 103, 157, 0.08);
}

.portal-panel .project-card,
.portal-panel .friend-link {
    border-color: var(--life-rule);
    border-radius: 12px;
    background: linear-gradient(145deg, #ffffff, var(--life-blue-pale));
}

.portal-panel .project-card:hover,
.portal-panel .friend-link:hover {
    border-color: rgba(109, 142, 208, 0.44);
    box-shadow: 0 10px 30px rgba(98, 119, 183, 0.12);
}

.portal-panel .project-link {
    border-color: rgba(109, 142, 208, 0.28);
    border-radius: 999px;
    background: var(--life-blue-soft);
    color: var(--life-blue);
}

.portal-panel .project-link:hover:not(:disabled),
.portal-panel .project-link:focus-visible {
    border-color: rgba(212, 116, 170, 0.5);
    background: var(--life-pink-soft);
    color: var(--life-pink);
}

.portal-panel .pub-btn {
    padding: 3px 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--life-blue-soft);
    color: var(--life-blue);
    transition: color var(--transition), background var(--transition), border-color var(--transition);
}

.portal-panel .pub-btn:hover:not(:disabled),
.portal-panel .pub-btn:focus-visible {
    border-color: rgba(212, 116, 170, 0.18);
    background: var(--life-pink-soft);
    color: var(--life-pink);
}

.portal-panel .pub-btn:disabled,
.portal-panel .project-link:disabled {
    opacity: 0.48;
    cursor: not-allowed;
}

.portal-panel .shelf-icon,
.portal-panel .friend-link {
    color: var(--life-blue);
}

.portal-panel .thought-toggle {
    border-bottom-color: rgba(109, 142, 208, 0.35);
    color: var(--life-blue);
}

.portal-panel .thought-toggle:hover,
.portal-panel .friend-link:hover {
    color: var(--life-pink);
}

:is(.portal-panel, .deep-sky-card) :is(button, a, [tabindex]):focus-visible {
    outline: 2px solid var(--life-blue);
    outline-offset: 3px;
}

:is(.portal-panel, .deep-sky-card)::selection,
:is(.portal-panel, .deep-sky-card) ::selection {
    background: rgba(212, 116, 170, 0.18);
}

.star-reader {
    margin-top: 24px;
    padding: 17px 16px 16px;
    border: 1px solid rgba(109, 142, 208, 0.2);
    border-radius: 12px;
    background:
        radial-gradient(circle at 92% 0%, rgba(212, 116, 170, 0.11), transparent 38%),
        linear-gradient(145deg, var(--life-blue-soft), rgba(255, 255, 255, 0.72));
    box-shadow: 0 8px 24px rgba(98, 119, 183, 0.08);
    color: var(--life-ink-soft);
}

.star-reader-kicker {
    color: var(--life-pink);
}

.star-reader-title {
    color: var(--life-blue);
}

.star-reader-meta,
.star-reader-description {
    color: var(--life-ink-soft);
}

.star-reader-status {
    color: var(--life-ink-soft);
}

.star-reader.is-overview,
.star-reader.is-empty {
    padding-top: 17px;
    border-top: 1px solid rgba(109, 142, 208, 0.2);
}

.star-reader.is-overview {
    margin-top: 24px;
}

.star-reader.is-overview .star-reader-status,
.star-reader.is-empty .star-reader-status {
    border-left-color: rgba(212, 116, 170, 0.44);
    color: var(--life-ink-soft);
}

.home-route-preview {
    border-color: rgba(109, 142, 208, 0.22);
    background:
        radial-gradient(circle at 87% 12%, rgba(212, 116, 170, 0.14), transparent 42%),
        linear-gradient(145deg, rgba(238, 243, 255, 0.92), rgba(255, 240, 247, 0.82));
}

body.route-preview-active .star-reader {
    box-shadow: none;
}

.home-route-launch {
    border-color: var(--life-blue);
    border-radius: 999px;
    background: var(--life-blue);
    color: #ffffff;
}

.home-route-launch:hover,
.home-route-launch:focus-visible {
    border-color: var(--life-pink);
    background: var(--life-pink);
}

.home-route-cancel {
    border-color: rgba(109, 142, 208, 0.28);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
    color: var(--life-blue);
}

.home-route-cancel:hover,
.home-route-cancel:focus-visible {
    border-color: rgba(212, 116, 170, 0.48);
    background: var(--life-pink-soft);
    color: var(--life-pink);
}

.footprints-map-card,
.footprints-map-viewer {
    border-color: var(--life-rule);
    border-radius: 12px;
    background: var(--life-paper);
    color: var(--life-ink);
}

.footprints-map-card .map-card-title {
    border-color: var(--life-rule-soft);
    color: var(--life-pink);
}

.footprints-map-number,
.footprints-viewer-header h2 {
    color: var(--life-pink);
}

.footprints-map-open,
.footprints-map-control,
.footprints-viewer-close,
.footprints-map-retry {
    border-color: var(--life-rule);
    background: var(--life-blue-soft);
    color: var(--life-blue);
}

.footprints-map-controls {
    border-color: var(--life-rule);
    background: var(--life-paper-soft);
}

:is(.footprints-map-open, .footprints-map-control, .footprints-viewer-close, .footprints-map-retry):is(:hover, :focus-visible) {
    border-color: rgba(212, 116, 170, 0.4);
    background: var(--life-pink-soft);
    color: var(--life-pink);
}

.footprints-map-zoom,
.footprints-map-hint {
    color: var(--life-ink-soft);
}

.deep-sky-card {
    scrollbar-color: rgba(109, 142, 208, 0.34) transparent;
}

.deep-sky-card h1,
.deep-sky-category {
    color: var(--life-pink);
}

.deep-sky-catalogue,
.deep-sky-source-kicker,
.deep-sky-source-links a {
    color: var(--life-blue);
}

.deep-sky-description,
.deep-sky-facts dt,
.deep-sky-observation,
.deep-sky-credit {
    color: var(--life-ink-soft);
}

.deep-sky-facts dd {
    color: var(--life-ink);
}

.deep-sky-facts,
.deep-sky-provenance {
    border-color: var(--life-rule);
}

.deep-sky-source-links a:hover {
    color: var(--life-pink);
}

@media (min-width: 901px) {
    .deep-sky-card {
        right: 24px;
        bottom: 24px;
        width: calc(38% - 24px);
    }
}

@media (max-width: 900px) {
    .deep-sky-card {
        width: calc(100% - 28px);
        margin: 14px;
    }
}

@media (max-width: 600px) {
    .footprints-map-viewer {
        border: 0;
        border-radius: 0;
    }
}

@media (max-width: 680px) {
    .portal-panel {
        border-radius: 14px;
    }

    .star-reader {
        padding: 15px 14px 14px;
    }
}