body {
    font-family: sans-serif;
    --primary-color: #5E704B;
    --secondary-color: #7B3B3B;
    --text-color: #FFFFFF;
    --bg-color: rgba(42, 42, 74, 0.8);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    background-image: url('红屋.png');
    background-size: cover;
    background-position: center;
    padding: 20px 0;
}

*, *::before, *::after {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

.page-header {
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 15px;
    border-radius: 10px;
}

.page-header h1 {
    font-size: 32px;
    margin: 0 0 10px 0;
}

.page-header p {
    font-size: 16px;
    margin: 0;
    color: #e0e0e0;
}

.container {
    display: flex;
    width: 90%;
    max-width: 1400px;
    background-color: var(--bg-color);
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
    overflow: hidden;
}

.left-panel, .right-panel {
    padding: 30px;
}

.left-panel {
    width: 40%;
    background-color: var(--primary-color);
    border-right: 1px solid #3a3a5a;
}

.right-panel {
    width: 60%;
    background-color: var(--secondary-color);
    background-size: cover;
    background-position: center;
    transition: background-image 0.5s ease-in-out;
}

/* Designer Themes */

/* Morris Style */
body.morris-theme {
    --primary-color: #5E704B;
    --secondary-color: #7B3B3B;
    --text-color: #FFFFFF;
    --bg-color: rgba(42, 42, 74, 0.8);
}

/* Gropius Style */
body.gropius-theme {
    background-image: url('瓦尔特·格罗皮乌斯/An absolute view of the building – Dessau Bauhaus.webp');
    --primary-color: #666A73;
    --secondary-color: #1F3A93;
    --text-color: #FFFFFF;
    --bg-color: rgba(42, 42, 74, 0.8);
}

/* Ruskin Style */
body.ruskin-theme {
    background-image: url('约翰·拉斯金/5.png');
    --primary-color: #EFE8D8;
    --secondary-color: #4A4A4A;
    --text-color: #000000;
    --bg-color: rgba(255, 255, 255, 0.8);
}

/* Gaudi Style */
body.gaudi-theme {
    background-image: url('安东尼·高迪/Casa Batlló.jpg');
    --primary-color: #B65C36; /* Ocher */
    --secondary-color: #006666; /* Bluish Green */
    --text-color: #FFFFFF;
    --bg-color: rgba(42, 42, 74, 0.8);
}

/* Le Corbusier Style */
body.corbusier-theme {
    background-image: url('勒·柯布西耶/The Villa Savoye in Poissy (1928–1931).jpg');
    --primary-color: #EAEAEA;
    --secondary-color: #000000;
    --accent-color: #000000;
    --text-color: #000000;
    --bg-color: rgba(255, 255, 255, 0.8);
}

/* Mondrian Style */
body.mondrian-theme {
    background-image: url('皮特·蒙德里安/Piet_Mondriaan,_1930_-_Mondrian_Composition_II_in_Red,_Blue,_and_Yellow.jpg');
    --primary-color: #FF0000;
    --secondary-color: #0033FF;
    --accent-color: #FFD700;
    --text-color: #FFFFFF;
    --bg-color: rgba(255, 255, 255, 0.9);
}

/* Mies van der Rohe Style */
body.mies-theme {
    background-image: url('密斯·凡·德·罗/Barcelona Pavilion.jpg');
    --primary-color: #333333;
    --secondary-color: #CCCCCC;
    --text-color: #FFFFFF;
    --bg-color: rgba(26, 26, 46, 0.8);
}

/* Henry van de Velde Style */
body.velde-theme {
    background-image: url('亨利·凡·德·威尔德.png');
    --primary-color: #812828;
    --secondary-color: #D6AC2F;
    --text-color: #FFFFFF;
    --bg-color: rgba(42, 42, 74, 0.8);
}


body[class*="-theme"] .container {
    background-color: var(--bg-color);
}

body[class*="-theme"] .left-panel {
    background-color: var(--primary-color);
}

body[class*="-theme"] .right-panel {
    background-color: var(--secondary-color);
}

body[class*="-theme"] h1, body[class*="-theme"] h2, body[class*="-theme"] p {
    color: var(--text-color);
}

body.ruskin-theme h1, body.ruskin-theme h2, body.ruskin-theme p, 
body.corbusier-theme h1, body.corbusier-theme h2, body.corbusier-theme p,
body.mondrian-theme h1, body.mondrian-theme h2, body.mondrian-theme p {
    color: var(--text-color);
}

body[class*="-theme"] .shape-btn, body[class*="-theme"] .time-btn, body[class*="-theme"] .event-btn {
    background-color: var(--secondary-color);
    color: var(--text-color);
    border: 1px solid var(--primary-color);
}

body[class*="-theme"] .shape-btn.active, body[class*="-theme"] .time-btn.active, body[class*="-theme"] .event-btn.active {
    background-color: var(--primary-color);
    border: 1px solid var(--secondary-color);
}

body.mondrian-theme .shape-btn.active, body.mondrian-theme .time-btn.active, body.mondrian-theme .event-btn.active {
    background-color: var(--accent-color);
    color: #000000;
}

body.corbusier-theme .shape-btn, body.corbusier-theme .time-btn, body.corbusier-theme .event-btn {
    background-color: #cccccc;
    color: #000000;
}

body.corbusier-theme .shape-btn.active, body.corbusier-theme .time-btn.active, body.corbusier-theme .event-btn.active {
    background-color: var(--accent-color);
    color: #ffffff;
}

.header h1 {
    font-size: 24px;
    margin-bottom: 5px;
}

.header p {
    font-size: 14px;
    color: #a0a0c0;
}

.form-section {
    margin-bottom: 20px;
}

.form-section h2 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #e0e0e0;
    font-weight: bold;
}

input[type="text"], input[type="email"], input[type="password"], select {
    width: 100%;
    padding: 10px;
    background-color: #1e1e3f;
    border: 1px solid #3a3a5a;
    border-radius: 5px;
    color: #e0e0e0;
    font-size: 16px;
}

.auth-panel {
    width: min(480px, 92%);
    margin-bottom: 24px;
}

.auth-card {
    padding: 30px;
    border-radius: 16px;
    color: #fff;
    background: rgba(28, 28, 52, 0.94);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
}

.auth-card h2 {
    margin: 0 0 8px;
    font-size: 30px;
}

.auth-view[hidden] { display: none; }

.auth-intro {
    margin: 0 0 22px;
    color: #bfc1d8;
}

.auth-card form,
.auth-card label {
    display: grid;
    gap: 8px;
}

.auth-card form { gap: 14px; }
.auth-card button,
.account-summary button,
.package-card button,
.local-gallery button,
.section-heading button {
    padding: 10px 14px;
    border: 0;
    border-radius: 8px;
    cursor: pointer;
    color: #fff;
    background: #4a90e2;
}

.auth-card form > button {
    width: 100%;
    margin-top: 4px;
    font-size: 17px;
    font-weight: 700;
}

.auth-switch {
    margin: 20px 0 0;
    color: #bfc1d8;
    text-align: center;
}

.auth-switch button {
    padding: 4px 6px;
    color: #72b2ff;
    background: transparent;
    font: inherit;
    font-weight: 700;
}

.auth-switch button:hover { color: #a6d0ff; }

.auth-message {
    min-height: 22px;
    margin: 12px 0 0;
    color: #ffb5b5;
    text-align: center;
}

.account-summary {
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
}

.account-summary:not([hidden]) { display: flex; }
.account-summary a { color: #fff; }

.credit-shop,
.local-gallery-section {
    padding: 18px;
    margin-bottom: 20px;
    border-radius: 15px;
    background: rgba(42, 42, 74, 0.92);
}

.package-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.package-card {
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    text-align: center;
}

.package-card strong,
.package-card span { display: block; margin-bottom: 6px; }
.package-card button { width: 100%; margin-top: 8px; }
.storage-note { font-size: 12px; opacity: 0.8; }

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

.local-gallery {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.local-work {
    padding: 8px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.22);
}

.local-work img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
}

.local-work p { font-size: 12px; }

.gender-selection {
    margin: 10px 0;
}

.color-palette {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.color-personality {
    font-size: 12px;
    color: #a0a0c0;
}

.color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid transparent;
}

.color-swatch.active {
    border-color: #fff;
}

.shape-selection, .time-period-selection, .event-selection {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.shape-item {
    position: relative;
}

.tooltip {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}

.shape-item:hover .tooltip {
    visibility: visible;
    opacity: 1;
}

.shape-btn, .time-btn, .event-btn {
    background-color: #3a3a5a;
    color: #e0e0e0;
    border: none;
    padding: 10px 15px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 14px;
}

.shape-btn.active, .time-btn.active, .event-btn.active {
    background-color: #4a90e2;
}

.designer-selection {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
}

/* Slideshow container */
.slideshow-container {
  position: relative;
  background-color: #1e1e3f;
  border-radius: 10px;
  padding: 20px;
  margin-top: 30px; /* Move section down */
  padding-bottom: 80px; /* Make space for description */
}

/* Hide the images by default */
.slide {
  display: none;
}

.slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  padding: 10px;
  color: white;
  font-weight: bold;
  font-size: 24px;
  transition: 0.6s ease;
  border-radius: 50%;
  user-select: none;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 3;
  line-height: 1;
}

.prev {
    left: 20px;
}

.next {
    right: 20px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #ffffff;
  font-size: 22px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  top: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: none;
}
#period-description {
    color: #a0a0c0;
    text-align: center;
    font-size: 14px;
    padding: 0 20px;
    margin-top: 40px; /* Adjust this value as needed */
    position: relative;
    z-index: 2;
}

/* Fading animation */
.fade {
  animation-name: fade;
  animation-duration: 1.5s;
}

@keyframes fade {
  from {opacity: .4} 
  to {opacity: 1}
}

.designer-card {
    text-align: center;
    cursor: pointer;
}

.designer-card img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid transparent;
    object-fit: cover;
}

.designer-card.active img {
    border-color: #4a90e2;
}

#generate-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(90deg, #ff8a00, #e52e71);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    margin-top: 20px;
    margin-bottom: 10px;
}

#generate-btn:disabled,
#send-btn:disabled {
    cursor: wait;
    opacity: 0.65;
}

#loading-indicator {
    text-align: center;
    color: #a0a0c0;
    padding: 10px;
    background-color: #2a2a4a;
    border-radius: 5px;
}

.service-status {
    display: inline-block;
    margin-top: 12px !important;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px !important;
    background: rgba(255, 255, 255, 0.14);
}

.service-status[data-state="ready"]::before {
    content: "● ";
    color: #66e28b;
}

.service-status[data-state="paused"]::before {
    content: "● ";
    color: #ffd166;
}

.service-status[data-state="error"]::before {
    content: "● ";
    color: #ff6b6b;
}

.error-message {
    margin-top: 10px;
    padding: 12px;
    border-radius: 8px;
    color: #fff;
    background: rgba(145, 25, 25, 0.9);
}

.mbti-result-placeholder {
    background-color: #2a2a4a;
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    margin-bottom: 20px;
}

.chat-interface {
    background-color: #2a2a4a;
    border-radius: 15px;
    padding: 20px;
    height: 500px;
    display: flex;
    flex-direction: column;
}

#chat-history {
    flex-grow: 1;
    overflow-y: auto;
    margin-bottom: 15px;
}

.chat-input {
    display: flex;
}

#user-input {
    flex-grow: 1;
    margin-right: 10px;
}

#send-btn {
    background-color: #4a90e2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

.chat-message {
    margin-bottom: 15px;
}

.chat-message.user {
    text-align: right;
}

.message-bubble {
    display: inline-block;
    padding: 10px 15px;
    border-radius: 20px;
    max-width: 80%;
}

.chat-message.user .message-bubble {
    background-color: #4a90e2;
}

.chat-message.ai .message-bubble {
    background-color: #3a3a5a;
}

.chat-message.error .message-bubble {
    background-color: #7a2525;
}

.generated-image {
    max-width: 100%;
    border-radius: 10px;
    margin-top: 10px;
}

/* 图片预览相关样式 */
.image-preview-container {
    position: relative;
    display: inline-block;
    border-radius: 8px;
    overflow: hidden;
}

#generated-image {
    display: block;
    max-width: 100%;
    height: auto;
}

#pattern-result {
    margin-top: 20px;
    text-align: center;
}

#image-container {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
}

.ai-label {
    position: absolute;
    left: 10px;
    bottom: 10px;
    padding: 5px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(0, 0, 0, 0.68);
    font-size: 12px;
}

#zoom-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 5px 10px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    transition: background-color 0.3s;
    border: 0;
}

#zoom-btn:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

#qrcode-container {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background-color: white;
    padding: 5px;
    border-radius: 4px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    cursor: pointer;
    display: none; /* Initially hidden */
}

#image-container:hover #qrcode-container {
    display: block; /* Show on hover */
}

#qrcode-container canvas {
    display: block;
}

/* Keep existing modal styles */
.modal {
    position: fixed;
    z-index: 1000;
    padding-top: 50px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.9);
}

.modal:not([hidden]) {
    display: block;
}

.modal-content {
    margin: auto;
    display: block;
    max-width: 90%;
    max-height: 90vh;
}

.close-modal {
    position: absolute;
    right: 35px;
    top: 15px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    background: transparent;
    border: 0;
}

.close-modal:hover,
.close-modal:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

#pattern-preview:hover {
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

#qrcode {
    background: white;
    padding: 10px;
    border-radius: 4px;
    display: inline-block;
}

#download-qr-btn:hover {
    background-color: #45a049;
}

.qr-toggle-btn {
    margin-top: 15px;
    padding: 8px 15px;
    background-color: transparent;
    color: var(--text-color);
    border: 1px solid var(--text-color);
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

.qr-toggle-btn:hover {
    background-color: var(--text-color);
    color: var(--primary-color);
}

@media (max-width: 900px) {
    body {
        padding: 0;
        background-attachment: fixed;
    }

    .page-header {
        width: calc(100% - 24px);
        margin: 12px;
    }

    .page-header h1 {
        font-size: 26px;
    }

    .container {
        width: 100%;
        border-radius: 0;
        flex-direction: column;
    }

    .auth-card { padding: 24px 20px; }

    .left-panel,
    .right-panel {
        width: 100%;
        padding: 22px;
    }

    .left-panel {
        border-right: 0;
    }

    .designer-selection {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 10px;
    }

    .designer-card img {
        width: 64px;
        height: 64px;
    }

    .designer-card p {
        font-size: 12px;
    }

    .chat-interface {
        height: 420px;
    }
}

@media (max-width: 520px) {
    .page-header h1 {
        font-size: 22px;
    }

    .left-panel,
    .right-panel {
        padding: 16px;
    }

    .designer-selection {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .package-list,
    .local-gallery {
        grid-template-columns: 1fr;
    }

    .color-item {
        width: calc(33.333% - 10px);
    }

    .chat-input {
        gap: 8px;
    }

    #user-input {
        min-width: 0;
        margin-right: 0;
    }

    #send-btn {
        padding: 10px 14px;
    }
}

/* Public product homepage */
body.landing-mode {
    display: block;
    padding: 0;
    color: #24222d;
    background: #f5f0e6;
    background-image:
        radial-gradient(circle at 12% 18%, rgba(204, 103, 58, 0.13), transparent 26%),
        radial-gradient(circle at 88% 8%, rgba(45, 92, 80, 0.15), transparent 25%);
}

.site-nav {
    position: relative;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(1180px, calc(100% - 40px));
    min-height: 76px;
    margin: 0 auto 18px;
    gap: 24px;
}

.landing-mode .site-nav {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(54, 49, 43, 0.12);
}

.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: inherit;
    text-decoration: none;
}

.brand-mark {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50% 45% 55% 42%;
    color: #fff;
    background: #b55732;
    font-family: serif;
    font-size: 22px;
    box-shadow: 0 8px 18px rgba(118, 55, 33, 0.2);
}

.brand strong,
.brand small { display: block; }
.brand strong { font-size: 16px; letter-spacing: 0.08em; }
.brand small { margin-top: 3px; font-size: 9px; letter-spacing: 0.16em; opacity: 0.62; }

.nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-actions button,
.hero-actions button {
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
}

.nav-login {
    padding: 10px 18px;
    color: #403b38;
    background: transparent;
}

.nav-register {
    padding: 10px 20px;
    color: #fff;
    background: #2e5e52;
    box-shadow: 0 7px 18px rgba(46, 94, 82, 0.2);
}

.site-nav .account-summary {
    margin-top: 0;
    justify-content: flex-end;
    color: #fff;
}

.landing-mode .site-nav .account-summary { color: #29262b; }
.landing-mode .site-nav .account-summary a { color: #2e5e52; }

.public-home {
    width: min(1180px, calc(100% - 40px));
    margin: 0 auto;
}

.hero-section {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(380px, 0.9fr);
    align-items: center;
    min-height: 620px;
    gap: 70px;
    padding: 70px 0 90px;
}

.eyebrow {
    margin: 0 0 16px;
    color: #a34c2d !important;
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.hero-copy h1 {
    margin: 0;
    color: #28252a;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(44px, 5vw, 68px);
    font-weight: 700;
    line-height: 1.18;
    letter-spacing: -0.04em;
}

.hero-description {
    max-width: 650px;
    margin: 26px 0 30px;
    color: #5f5956 !important;
    font-size: 18px !important;
    line-height: 1.85;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.hero-actions button { padding: 14px 24px; }
.primary-cta { color: #fff; background: #b55732; box-shadow: 0 12px 25px rgba(181, 87, 50, 0.25); }
.secondary-cta { color: #2e5e52; background: rgba(46, 94, 82, 0.1); }
.bonus-note { margin: 11px 0 0; color: #756e68 !important; font-size: 12px !important; }

.landing-mode .service-status {
    margin-top: 22px !important;
    color: #4d4845;
    background: rgba(255, 255, 255, 0.65);
    box-shadow: inset 0 0 0 1px rgba(54, 49, 43, 0.1);
}

.hero-art {
    position: relative;
    min-height: 470px;
    border-radius: 52% 48% 46% 54%;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(220, 207, 183, 0.45)),
        url('红屋.png') center/cover;
    box-shadow: 0 36px 70px rgba(67, 53, 41, 0.18);
}

.hero-art::after {
    content: "";
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    border-radius: inherit;
}

.art-center,
.art-orbit {
    position: absolute;
    z-index: 2;
    display: grid;
    place-items: center;
    color: #fff;
    box-shadow: 0 18px 35px rgba(35, 30, 28, 0.22);
}

.art-center {
    inset: 50% auto auto 50%;
    width: 150px;
    height: 150px;
    transform: translate(-50%, -50%);
    align-content: center;
    border-radius: 50%;
    background: rgba(34, 51, 48, 0.92);
}

.art-center strong { font-size: 44px; line-height: 1; }
.art-center span, .art-center small { font-size: 12px; letter-spacing: 0.12em; }

.art-orbit {
    width: 116px;
    padding: 8px 8px 12px;
    border-radius: 60px;
    background: rgba(255, 255, 255, 0.92);
    color: #34302d;
    font-size: 12px;
    font-weight: 700;
}

.art-orbit img { width: 98px; height: 98px; border-radius: 50%; object-fit: cover; }
.art-orbit-one { left: -30px; top: 75px; }
.art-orbit-two { right: -26px; top: 120px; }
.art-orbit-three { right: 48px; bottom: -30px; }

.value-section {
    padding: 80px 0;
    border-top: 1px solid rgba(54, 49, 43, 0.12);
}

.section-intro { max-width: 690px; margin-bottom: 38px; }
.section-intro h2,
.how-section h2 {
    margin: 0 0 14px;
    color: #29262a;
    font-family: "Songti SC", "STSong", serif;
    font-size: clamp(32px, 4vw, 48px);
}
.section-intro > p:last-child { color: #6a625d !important; line-height: 1.8; }

.value-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.value-grid article {
    min-height: 220px;
    padding: 28px;
    border-radius: 22px;
    background: rgba(255, 255, 255, 0.68);
    box-shadow: 0 14px 35px rgba(55, 43, 35, 0.07);
}
.value-grid article > span { color: #b55732; font-family: serif; font-size: 26px; }
.value-grid h3 { margin: 30px 0 12px; font-size: 19px; }
.value-grid p { margin: 0; color: #6a625d !important; font-size: 14px !important; line-height: 1.75; }

.how-section {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 80px;
    align-items: start;
    margin-bottom: 90px;
    padding: 60px;
    border-radius: 30px;
    color: #fff;
    background: #293f39;
}
.how-section h2 { color: #fff; }
.how-section .eyebrow { color: #e1a17f !important; }
.how-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.how-list li { display: grid; grid-template-columns: 100px 1fr; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.how-list li:last-child { border-bottom: 0; }
.how-list strong { font-size: 20px; }
.how-list span { color: rgba(255,255,255,.72); line-height: 1.6; }

.auth-panel {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    width: auto;
    margin: 0;
    padding: 20px;
}
.auth-backdrop { position: absolute; inset: 0; border: 0; background: rgba(20, 19, 27, 0.72); backdrop-filter: blur(8px); cursor: pointer; }
.auth-card { position: relative; z-index: 1; width: min(460px, 100%); max-height: calc(100vh - 40px); overflow-y: auto; }
.close-auth { position: absolute; top: 12px; right: 15px; padding: 4px 9px !important; color: #bfc1d8 !important; background: transparent !important; font-size: 28px; line-height: 1; }

@media (max-width: 980px) {
    .hero-section { grid-template-columns: 1fr; gap: 38px; padding-top: 45px; }
    .hero-copy { max-width: 760px; }
    .hero-art { width: min(560px, calc(100% - 50px)); margin: 0 auto; }
    .value-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .how-section { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 620px) {
    .site-nav, .public-home { width: min(100% - 28px, 1180px); }
    .site-nav { min-height: 66px; gap: 10px; }
    .brand small { display: none; }
    .brand strong { font-size: 13px; }
    .brand-mark { width: 36px; height: 36px; }
    .nav-login { padding: 9px 8px; }
    .nav-register { padding: 9px 13px; }
    .hero-section { min-height: auto; padding: 50px 0 70px; }
    .hero-copy h1 { font-size: 39px; }
    .hero-description { font-size: 16px !important; }
    .hero-actions { display: grid; }
    .hero-art { min-height: 360px; }
    .art-orbit { width: 88px; }
    .art-orbit img { width: 72px; height: 72px; }
    .art-orbit-one { left: -16px; }
    .art-orbit-two { right: -16px; }
    .art-orbit-three { right: 22px; }
    .art-center { width: 120px; height: 120px; }
    .value-section { padding: 58px 0; }
    .value-grid { grid-template-columns: 1fr; }
    .value-grid article { min-height: auto; }
    .value-grid h3 { margin-top: 18px; }
    .how-section { margin-bottom: 40px; padding: 34px 24px; }
    .how-list li { grid-template-columns: 70px 1fr; }
    .site-nav .account-summary { font-size: 12px; gap: 7px; }
    .site-nav .account-summary #account-name { display: none; }
}

/* Clear selected states across every designer theme. */
body[class*="-theme"] .shape-btn,
body[class*="-theme"] .event-btn {
    position: relative;
    border: 1px solid rgba(255, 255, 255, .34);
    background: rgba(30, 30, 63, .38);
    color: #fff;
    font-weight: 650;
    transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

body[class*="-theme"] .shape-btn:hover,
body[class*="-theme"] .event-btn:hover {
    border-color: rgba(255, 255, 255, .8);
    transform: translateY(-1px);
}

body[class*="-theme"] .shape-btn.active,
body[class*="-theme"] .event-btn.active {
    padding-left: 34px;
    border: 2px solid #fff;
    background: #fff;
    color: #202126;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .22), 0 6px 16px rgba(0, 0, 0, .2);
}

.shape-btn.active::before,
.event-btn.active::before {
    content: "✓";
    position: absolute;
    left: 12px;
    top: 50%;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: #087af0;
    color: #fff;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
}

.designer-card {
    position: relative;
    padding: 9px 6px;
    border: 2px solid transparent;
    border-radius: 14px;
    transition: background .16s ease, border-color .16s ease, transform .16s ease;
}

.designer-card:hover { transform: translateY(-2px); }
.designer-card.active {
    border-color: #fff;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 6px 16px rgba(0, 0, 0, .16);
}
.designer-card.active::after {
    content: "✓";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border: 2px solid #fff;
    border-radius: 50%;
    background: #087af0;
    color: #fff;
    font-weight: 900;
    line-height: 18px;
}
.designer-card.active img { border-color: #fff; box-shadow: 0 0 0 3px #087af0; }

.credit-shop { margin-top: 20px; margin-bottom: 0; }
.credit-shop-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.credit-shop-heading h2 { margin: 3px 0 0; }
.credit-shop-heading > div > span { color: #c6c8db; font-size: 12px; }
.payment-status { padding: 6px 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; color: #d9dbeb; font-size: 11px; white-space: nowrap; }
.package-card { background: rgba(255, 255, 255, .04); }
.package-card button:disabled { opacity: .64; cursor: not-allowed; }

.admin-page { align-items: stretch; min-height: 100vh; background: #f3f4f7; padding: 24px; color: #202126; }
.admin-shell { width: min(1480px, 100%); margin: 0 auto; }
.admin-header { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0 8px; }
.admin-header h1 { margin: 0; font-size: clamp(34px, 5vw, 58px); letter-spacing: -.04em; }
.admin-header p { margin: 8px 0 0; color: #777b85; }
.admin-header a { color: #126ee8; font-weight: 700; }
.admin-header-actions { display: flex; align-items: center; gap: 12px; }
.admin-header-actions button { padding: 10px 16px; border: 0; border-radius: 10px; color: #202126; background: #e2e4e9; font-weight: 700; cursor: pointer; }
.admin-login-card { width: min(480px, 100%); margin: 70px auto 24px; padding: 30px; border-radius: 18px; background: #fff; box-shadow: 0 18px 45px rgba(32,33,38,.1); }
.admin-login-card h2 { margin: 5px 0 8px; font-size: 30px; }
.admin-login-card > p { color: #777b85; }
.admin-login-card .admin-login-kicker, .admin-eyebrow { margin: 0; color: #126ee8; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.admin-login-card form, .admin-login-card label { display: grid; gap: 8px; }
.admin-login-card form { gap: 16px; margin-top: 22px; }
.admin-login-card input { padding: 12px; border: 1px solid #d8dbe2; border-radius: 9px; color: #202126; background: #fafbfc; }
.admin-login-card button { margin-top: 4px; padding: 12px; border: 0; border-radius: 9px; color: #fff; background: #087af0; font-size: 16px; font-weight: 700; cursor: pointer; }
#admin-message { margin: 12px 0; padding: 12px 16px; border-radius: 10px; background: #fff0f0; color: #b4232a; }
#admin-message.is-status { background: #e9f8f0; color: #137a48; }
.stats-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 24px 0 18px; }
.stat-card, .admin-card { padding: 22px; border: 1px solid #e7e8ec; border-radius: 18px; background: #fff; box-shadow: 0 6px 22px rgba(32,33,38,.04); }
.stat-card strong, .stat-card span { display: block; }
.stat-card strong { color: #087af0; font-size: 32px; }
.stat-card span { margin-top: 3px; color: #777b85; font-size: 13px; }
.admin-tabs { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.admin-tabs button { padding: 11px 20px; border: 0; border-radius: 999px; background: #e4e6eb; color: #30323a; font-size: 15px; font-weight: 700; cursor: pointer; }
.admin-tabs button.is-active { color: #fff; background: #087af0; }
.admin-card { margin-bottom: 18px; }
.admin-card-heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 22px; }
.admin-card-heading h2 { margin: 4px 0 0; font-size: 30px; }
.admin-card-heading p:not(.admin-eyebrow) { margin: 6px 0 0; color: #777b85; }
.admin-search { display: grid; gap: 6px; min-width: min(360px, 100%); color: #676b75; font-size: 12px; font-weight: 700; }
.admin-search input { width: 100%; padding: 11px 13px; border: 1px solid #d8dbe2; border-radius: 10px; background: #fafbfc; }
.table-wrap { overflow-x: auto; }
.admin-card table { width: 100%; border-collapse: collapse; }
.admin-card th, .admin-card td { padding: 14px 12px; border-bottom: 1px solid #e8e9ed; text-align: left; vertical-align: top; white-space: pre-line; }
.admin-card th { color: #858994; font-size: 12px; }
.admin-card td { font-size: 13px; }
.admin-card td strong, .admin-card td small { display: block; }
.admin-card td small { margin-top: 5px; color: #858994; line-height: 1.55; }
.admin-user-id { display: block; max-width: 180px; overflow: hidden; color: #343740; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.role-badge, .status-badge { display: inline-flex; padding: 5px 9px; border-radius: 7px; background: #eaecf0; color: #555965; font-size: 12px; font-weight: 700; white-space: nowrap; }
.role-badge.admin, .status-badge.succeeded { background: #e6f6ee; color: #137a48; }
.status-badge.failed { background: #fff0f0; color: #b4232a; }
.status-badge.pending { background: #fff6de; color: #9a6500; }
.admin-row-actions { min-width: 260px; }
.grant-package-control { display: flex; gap: 7px; margin-bottom: 8px; }
.grant-package-control select { min-width: 126px; padding: 8px; border: 1px solid #d8dbe2; border-radius: 8px; background: #fff; }
.admin-action, .package-editor button { padding: 8px 12px; border: 0; border-radius: 8px; color: #fff; background: #087af0; font-weight: 700; cursor: pointer; }
.admin-action + .admin-action { margin-left: 7px; }
.admin-action.secondary { color: #30323a; background: #e7e9ee; }
.admin-action.danger { color: #ad242b; background: #ffebec; }
.admin-action:disabled { color: #858994; background: #eceef2; cursor: not-allowed; }
.credit-positive { color: #14804a; font-weight: 800; }
.credit-negative { color: #c32d35; font-weight: 800; }
.admin-empty { padding: 34px !important; color: #858994; text-align: center !important; }
.package-editor { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr) auto; gap: 12px; align-items: end; margin-bottom: 10px; }
.package-editor label { display: grid; gap: 5px; }
.package-editor input[type="number"] { width: 100%; padding: 9px; border: 1px solid #d8dbe2; border-radius: 8px; }
@media (max-width: 760px) {
  .admin-page { padding: 14px; }
  .admin-header { align-items: flex-start; }
  .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats-grid .stat-card:last-child { grid-column: 1 / -1; }
  .admin-card-heading { align-items: stretch; flex-direction: column; }
  .admin-search { min-width: 0; }
  .package-editor { grid-template-columns: 1fr; }
}