.mold-hero { min-height: calc(100vh - 72px); display: flex; align-items: center; padding: 68px 0 76px; }
.mold-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, .82fr); gap: 56px; align-items: center; }
.mold-note { color: var(--muted); font-size: .9rem; margin-top: 18px; }
.mold-hero-art { position: relative; min-height: 430px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(145deg, #caeaf2, #f3fbfd); box-shadow: var(--shadow); }
.mold-art-sand { position: absolute; inset: auto -5% -20% -5%; height: 66%; border-radius: 50% 50% 0 0; background: repeating-radial-gradient(circle at 30% 20%, rgba(255,255,255,.38) 0 1px, transparent 2px 7px), #e7c47b; transform: rotate(-5deg); }
.mold-art-shell { position: absolute; inset: 18% 12% 25% 13%; border: 21px solid #fff; border-radius: 48% 52% 44% 52%; box-shadow: 0 18px 22px rgba(0,63,95,.18), inset 0 0 0 8px #72bdd4; transform: rotate(-7deg); }
.mold-art-shell span { position: absolute; display: block; width: 16px; height: 16px; border-radius: 50%; background: #72bdd4; }
.mold-art-shell span:nth-child(1) { left: 16%; top: 22%; }.mold-art-shell span:nth-child(2) { right: 20%; top: 31%; }.mold-art-shell span:nth-child(3) { left: 31%; bottom: 18%; }.mold-art-shell span:nth-child(4) { right: 13%; bottom: 24%; }
.mold-art-dino { position: absolute; left: 28%; top: 38%; width: 46%; height: 25%; border: 12px solid var(--deep); border-radius: 48% 48% 38% 45%; background: rgba(255,255,255,.25); transform: rotate(-10deg); }
.mold-art-dino::before, .mold-art-dino::after, .mold-art-dino i { position: absolute; display: block; content: ""; background: var(--deep); }
.mold-art-dino::before { width: 44%; height: 12px; right: -36%; top: 58%; border-radius: 999px; transform: rotate(16deg); }.mold-art-dino::after { width: 12px; height: 48%; left: 28%; bottom: -44%; border-radius: 999px; }.mold-art-dino i { width: 12px; height: 12px; border-radius: 50%; left: 12%; top: 24%; }.mold-art-dino i:nth-child(2) { left: 47%; top: -28%; transform: rotate(34deg); width: 12px; height: 42px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.mold-art-dino i:nth-child(3) { left: 66%; top: -28%; transform: rotate(34deg); width: 12px; height: 42px; clip-path: polygon(50% 0, 100% 100%, 0 100%); }.mold-art-dino i:nth-child(4) { left: 58%; bottom: -44%; width: 12px; height: 48%; border-radius: 999px; }.mold-art-dino i:nth-child(5) { left: 19%; bottom: -44%; width: 12px; height: 46%; border-radius: 999px; }
.mold-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }.mold-steps article { border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 12px 30px rgba(16,33,42,.07); padding: 22px; }.mold-steps span { color: var(--blue-dark); display: block; font-size: .82rem; font-weight: 950; letter-spacing: .08em; margin-bottom: 18px; }.mold-steps p { color: var(--muted); }
.mold-studio-shell { display: grid; grid-template-columns: minmax(300px, .72fr) minmax(0, 1.28fr); gap: 24px; margin-top: 34px; }.mold-controls, .mold-preview-panel { min-width: 0; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.9); box-shadow: var(--shadow); padding: 22px; }.mold-controls { align-self: start; }.studio-account { display: grid; gap: 10px; }.studio-account > strong { color: var(--deep); font-size: 1.08rem; }.studio-account p { color: var(--muted); font-size: .91rem; }.studio-account form, #sand-mold-form { display: grid; gap: 16px; }.studio-account label, .settings-grid label { display: grid; gap: 6px; color: var(--deep); font-size: .82rem; font-weight: 900; }.studio-account input, .settings-grid input, .settings-grid select { min-height: 42px; width: 100%; border: 1px solid var(--line); border-radius: 7px; background: var(--paper); color: var(--ink); font: inherit; padding: 9px 10px; }.form-status { min-height: 1.35em; color: var(--muted); font-size: .88rem; }.mold-controls fieldset { border: 0; min-width: 0; }.mold-controls legend { color: var(--deep); font-size: .92rem; font-weight: 950; margin-bottom: 10px; }.upload-zone { display: grid; place-items: center; min-height: 166px; border: 1px dashed var(--blue); border-radius: 8px; background: #f1fafd; color: var(--deep); cursor: pointer; padding: 18px; text-align: center; }.upload-zone:hover { background: #e7f6fb; }.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }.upload-zone small { color: var(--muted); margin-top: 4px; }.upload-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--deep); color: white; font-size: 1.6rem; margin-bottom: 8px; }.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }.advanced-settings { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 14px 0; }.advanced-settings summary { color: var(--deep); cursor: pointer; font-size: .9rem; font-weight: 900; }.advanced-settings .settings-grid { margin-top: 14px; }.preview-grid { position: relative; display: grid; place-items: center; min-height: 520px; overflow: hidden; border: 1px solid var(--line); border-radius: 8px; background: linear-gradient(90deg, rgba(0,139,199,.06) 1px, transparent 1px), linear-gradient(180deg, rgba(0,139,199,.05) 1px, transparent 1px), #f1f7f9; background-size: 28px 28px; }.preview-empty { max-width: 330px; padding: 24px; color: var(--muted); text-align: center; }.preview-empty span { display: grid; place-items: center; width: 76px; height: 76px; border: 1px solid #abd8e7; border-radius: 16px; background: var(--paper); color: var(--blue-dark); font-size: 1.1rem; font-weight: 950; margin: 0 auto 20px; }.preview-empty strong { color: var(--deep); display: block; font-size: 1.18rem; margin-bottom: 8px; }.preview-grid img { max-width: 100%; max-height: 520px; object-fit: contain; }.preview-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border-top: 1px solid var(--line); margin: 18px 0; padding-top: 18px; }.preview-meta span { color: var(--muted); display: block; font-size: .76rem; font-weight: 850; text-transform: uppercase; }.preview-meta strong { color: var(--deep); display: block; font-size: .88rem; margin-top: 3px; }.mold-tools-callout { display: flex; align-items: center; justify-content: space-between; gap: 28px; }.mold-tools-callout > div { max-width: 720px; }
@media (max-width: 860px) { .mold-hero-grid, .mold-studio-shell { grid-template-columns: 1fr; }.mold-hero { min-height: auto; }.mold-steps { grid-template-columns: 1fr; }.mold-hero-art { min-height: 360px; }.mold-tools-callout { align-items: flex-start; flex-direction: column; }.preview-grid { min-height: 360px; } }
@media (max-width: 520px) { .settings-grid, .preview-meta { grid-template-columns: 1fr; }.mold-hero { padding: 48px 0; }.mold-hero-art { min-height: 300px; }.mold-controls, .mold-preview-panel { padding: 16px; } }