/* Site colors and components follow /dating/ and /upload/. */
.moon-shell{--moon-border:var(--bdc);width:100%;min-width:0;color:var(--tt);font-family:inherit;line-height:1.6}
.moon-shell *{box-sizing:border-box}
.moon-shell h1,.moon-shell h2,.moon-shell h3,.moon-shell p{margin:0}
.moon-shell a{color:inherit;text-decoration:none}
.moon-shell a:hover{color:var(--accent)}
.moon-shell .sect__title{line-height:1.4}
.moon-hero,.moon-panel,.moon-card{position:relative;border:1px solid var(--moon-border);border-radius:12px;background:var(--bg-4);box-shadow:0 6px 20px rgba(0,0,0,.08)}
.moon-hero::before,.moon-panel::before,.moon-card::before{content:'';position:absolute;top:0;bottom:0;left:0;width:3px;border-radius:12px 0 0 12px;background:var(--accent);pointer-events:none;z-index:1}
.moon-hero{display:flex;align-items:center;gap:18px;padding:18px 20px;margin-bottom:20px;overflow:hidden}
.moon-hero-icon{display:inline-flex;flex:0 0 50px;align-items:center;justify-content:center;width:50px;height:50px;border:1px solid var(--moon-border);border-radius:10px;background:var(--ui-bg-darker);color:var(--accent);font-size:23px}
.moon-hero-copy{flex:1;min-width:0}
.moon-hero h2{font-size:18px;line-height:1.3}
.moon-hero p{margin-top:4px;font-size:13px;line-height:1.45;color:var(--tt-l)}
.moon-wallet{display:flex;flex-direction:column;flex:0 0 auto;gap:2px;min-width:165px;padding:10px 16px;border:1px solid var(--moon-border);border-radius:10px;background:var(--bg)}
.moon-wallet:hover{border-color:var(--accent)}
.moon-wallet span{font-size:11px;color:var(--tt-l)}
.moon-wallet strong{font-size:24px;line-height:1.3;color:var(--tt)}
.moon-tabs,.moon-filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.moon-tabs a,.moon-filters a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 12px;border:1px solid var(--moon-border);border-radius:9px;background:var(--bg-4);color:var(--tt);font-size:13px;line-height:1.4}
.moon-tabs a{font-weight:700}
.moon-filters a{font-size:12px;min-height:36px}
.moon-tabs a:hover,.moon-tabs a[aria-current],.moon-filters a:hover,.moon-filters a[aria-current]{border-color:var(--accent);color:var(--accent)}
.moon-section-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}
.moon-section-head h2,.moon-panel h2{font-size:18px;line-height:1.4}
.moon-section-head p{margin-top:4px;font-size:13px;color:var(--tt-l)}
.moon-section-head>a{font-size:13px}
.moon-chip{display:inline-block;padding:5px 10px;border:1px solid var(--moon-border);border-radius:9px;background:var(--bg);color:var(--tt-l);font-size:11px;white-space:nowrap}
.moon-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.moon-grid--two{grid-template-columns:repeat(2,minmax(0,1fr))}
.moon-card{display:flex;flex-direction:column;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.moon-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 40%,var(--bdc));box-shadow:0 10px 28px rgba(0,0,0,.11)}

/* Product-specific colors are confined to previews. */
.moon-art{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:180px;overflow:hidden;border-bottom:1px solid var(--moon-border);background:var(--bg);color:var(--moon-item)}
.moon-art img{width:100%;height:100%;padding:14px;object-fit:contain}
.moon-art--banner img{padding:0;object-fit:cover}
.moon-crescent{display:block;font-family:Georgia,serif;font-size:78px;line-height:1.15;transform:rotate(-20deg)}
.moon-privilege-icon{display:block;font-size:64px;line-height:1.3}
.moon-art-caption{max-width:100%;padding:0 14px;color:var(--tt-l);font-size:11px;text-align:center;overflow-wrap:anywhere}
.moon-nickname{font-size:27px;font-weight:700}
.moon-nickname span{display:block;color:var(--tt-l);font-size:10px;font-weight:400;text-align:center}
.moon-nickname .moon-nickname-gradient{display:inline-block;color:var(--moon-nick-start,#a78bfa)}
@supports ((background-clip:text) or (-webkit-background-clip:text)){
    .moon-nickname .moon-nickname-gradient{background:linear-gradient(100deg,var(--moon-nick-start,#a78bfa),var(--moon-nick-end,#60a5fa));background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;box-decoration-break:clone}
}
.moon-nick-settings{display:flex;flex-direction:column;gap:12px;margin-top:12px;padding-top:16px;border-top:1px solid var(--moon-border)}
.moon-nick-settings>strong{font-size:13px}
.moon-frame-preview{display:flex;justify-content:center;padding:8px}
.moon-frame-preview img{display:block;width:72px;height:72px;object-fit:cover}
.moon-orbit.moon-orbit--gradient{border-color:transparent;background:linear-gradient(var(--bg-4),var(--bg-4)) padding-box,linear-gradient(135deg,var(--moon-item),var(--moon-frame-end)) border-box}
.moon-nick-colors{display:flex;flex-wrap:wrap;gap:12px}
.moon-nick-colors label{display:flex;flex:1;min-width:90px;flex-direction:column;gap:6px;font-size:12px;color:var(--tt-l)}
.moon-shell .moon-nick-colors input[type=color]{display:block;width:100%;height:42px;padding:4px;border:1px solid var(--moon-border);border-radius:8px;background:var(--bg);cursor:pointer}
.moon-nick-settings small{font-size:11px;color:var(--tt-l);line-height:1.5}
.moon-card-body .moon-nick-preview{flex:none;font-size:24px;overflow-wrap:anywhere}
.moon-studio-closed p{overflow-wrap:anywhere}
.moon-studio-fields{display:flex;flex-direction:column;gap:16px;min-width:0;padding:0;margin:0;border:0}
.moon-studio-type-message{white-space:pre-line;overflow-wrap:anywhere}
.moon-studio-fields[hidden],.moon-studio-type-message[hidden]{display:none!important}
.moon-css-lab{margin-top:20px}
.moon-css-lab details{padding:12px 0;font-size:13px}
.moon-css-lab details summary{cursor:pointer;font-weight:700}
.moon-css-lab code{overflow-wrap:anywhere;font-size:12px}
.moon-css-lab>label{display:block;margin:14px 0 6px;font-weight:700;font-size:13px}
.moon-css-lab textarea{width:100%;min-height:220px;padding:12px;background:var(--bg);color:var(--tt);border:1px solid var(--bdc);border-radius:10px;font:13px/1.6 Consolas,monospace;resize:vertical;white-space:pre;overflow:auto}
.moon-css-tools{display:flex;flex-wrap:wrap;align-items:end;gap:10px;margin:14px 0}
.moon-css-tools label{display:flex;flex-direction:column;gap:4px;font-size:12px}
.moon-css-tools select{max-width:100%;min-height:42px}
.moon-css-stage{width:100%;max-width:100%;overflow:hidden;border-radius:12px}
.moon-css-stage iframe{display:block;width:100%;height:660px;border:1px solid var(--bdc);border-radius:12px;background:#111827}
.moon-css-stage--mobile{width:360px;margin:0 auto}
.moon-orbit{display:grid;place-items:center;width:84px;height:84px;border:3px solid var(--moon-item);border-radius:50%;font-size:52px}
.moon-card-body{display:flex;flex:1;flex-direction:column;gap:8px;min-width:0;padding:18px}
.moon-eyebrow,.moon-step{display:block;color:var(--tt-3);font-size:11px;font-weight:600}
.moon-card h3{font-size:16px;line-height:1.4;overflow-wrap:anywhere}
.moon-card-body p{flex:1;color:var(--tt-l);font-size:13px;overflow-wrap:anywhere}
.moon-byline{margin-top:5px;color:var(--tt-3);font-size:11px}
.moon-byline a{text-decoration:underline}
.moon-card-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:12px;margin-top:5px;border-top:1px solid var(--moon-border)}
.moon-card-bottom strong{font-size:18px;white-space:nowrap}
.moon-shell .moon-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;height:auto;padding:8px 14px;border:1px solid var(--accent);border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-darker));color:#fff;box-shadow:0 7px 18px color-mix(in srgb,var(--accent) 20%,transparent);font-family:inherit;font-size:13px;font-weight:700;line-height:1.4;text-decoration:none;white-space:normal;cursor:pointer;transition:color .2s,border-color .2s,background .2s,box-shadow .2s}
.moon-shell .moon-button:hover{background:var(--accent-darker);border-color:var(--accent-darker);color:#fff}
.moon-shell .moon-button:disabled{opacity:.55;cursor:not-allowed;box-shadow:none}
.moon-shell .moon-button--quiet{border-color:var(--moon-border);background:var(--bg);color:var(--tt);box-shadow:0 4px 13px rgba(0,0,0,.05)}
.moon-shell .moon-button--quiet:hover{background:color-mix(in srgb,var(--accent) 6%,var(--bg));border-color:var(--accent);color:var(--accent)}
.moon-shell :focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.moon-short-link{color:var(--accent)!important;font-size:11px}
.moon-notice{padding:14px 18px;margin:18px 0;border:1px solid var(--moon-border);border-left:3px solid var(--accent);border-radius:10px;background:var(--bg-4);color:var(--tt);font-size:13px}
.moon-notice--error{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 6%,var(--bg-4))}
.moon-panel{min-width:0;padding:20px;margin-bottom:20px}
.moon-panel h2,.moon-panel h3{margin-bottom:14px}
.moon-panel h3{font-size:16px;line-height:1.4}
.moon-panel p{margin:12px 0;color:var(--tt-l);font-size:13px}
.moon-panel a{color:var(--accent)}
.moon-panel .moon-step{margin-bottom:14px}
.moon-panel .moon-big{color:var(--accent);font-size:28px}
.moon-muted{margin:14px 0!important;color:var(--tt-3);font-size:12px}
.moon-package{display:flex;flex-direction:column;gap:16px}
.moon-package>strong{font-size:28px}
.moon-package .moon-package-method{margin-top:auto}
.moon-package .moon-payment-hint{margin:auto 0 0;color:var(--tt-l);font-size:12px;line-height:1.5}
.moon-package .moon-payment-hint[hidden]{display:none}
.moon-package .moon-payment-hint:not([hidden])+.moon-package-method{margin-top:0}
.moon-payout-address{overflow-wrap:anywhere}
.moon-payout-forms{margin:20px 0 28px}
.moon-shell label{display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700}
.moon-shell label small{color:var(--tt-3);font-size:12px;font-weight:400}
.moon-shell input:not([type=checkbox]):not([type=hidden]),.moon-shell select,.moon-shell textarea{width:100%;min-width:0;min-height:42px;height:auto;padding:10px 12px;border:1px solid var(--moon-border);border-radius:10px;background-color:var(--bg);color:var(--tt);box-shadow:none;font:inherit;font-weight:400}
.moon-shell select{padding-right:30px}
.moon-shell textarea{resize:vertical}
.moon-shell input::placeholder,.moon-shell textarea::placeholder{color:var(--tt-3);opacity:1}
.moon-shell input:focus,.moon-shell select:focus,.moon-shell textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 10%,transparent)}
.moon-shell input[type=color]{height:44px!important;padding:3px!important}
.moon-shell input[type=file]{padding:6px!important;font-size:12px!important}
.moon-shell input[type=file]::file-selector-button{margin-right:10px;padding:7px 10px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);border-radius:8px;background:color-mix(in srgb,var(--accent) 7%,var(--bg));color:var(--accent);font-family:inherit;font-size:12px;font-weight:700;cursor:pointer}
.moon-table-wrap{overflow-x:auto}
.moon-table{width:100%;border-collapse:collapse;font-size:13px;text-align:left;white-space:nowrap}
.moon-table th{color:var(--tt-3);font-size:11px;font-weight:600}
.moon-table th,.moon-table td{padding:12px 10px;border-bottom:1px solid var(--moon-border)}
.moon-table small,.moon-list-row small{display:block;color:var(--tt-3);font-size:11px;overflow-wrap:anywhere}
.moon-positive{color:#087f5b}
.moon-list-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--moon-border);font-size:13px;overflow-wrap:anywhere}
.moon-list-row>div{min-width:0}
.moon-list-row form{flex-shrink:0}
.moon-studio{display:grid;grid-template-columns:1.4fr 1fr;gap:20px}
.moon-form{display:flex;flex-direction:column;gap:16px}
.moon-form-row{display:grid;grid-template-columns:1fr 100px;gap:16px}
.moon-shell .moon-check{flex-direction:row;align-items:flex-start;font-size:12px;font-weight:400}
.moon-check input{margin-top:4px;accent-color:var(--accent)}
.moon-studio-note .moon-crescent{width:1em;margin:5px 0 22px;color:var(--accent);font-size:60px;transform:none}
.moon-studio-note h3{font-size:20px;line-height:1.4}
.moon-empty{padding:42px 20px;border:1px solid var(--moon-border);border-radius:12px;background:var(--bg-4);text-align:center}
.moon-empty h2{font-size:18px}
.moon-empty p{margin:12px auto 22px;color:var(--tt-l);font-size:13px}
.moon-footer{margin-top:28px;color:var(--tt-3);font-size:11px;text-align:center}
.moon-pagination{display:flex;align-items:center;justify-content:center;gap:18px;margin:24px 0;font-size:13px}
.moon-pagination a{padding:8px 12px;border:1px solid var(--moon-border);border-radius:9px;background:var(--bg-4)}
.moon-pagination a:hover{border-color:var(--accent)}

/* Cosmetics share one compact header; role, activity and award blocks keep their own layout. */
.moon-profile-header{min-width:0;margin-bottom:20px;border:1px solid var(--bdc);border-radius:12px;overflow:hidden;background:var(--bg-4)}
.moon-profile-header.moon-profile-theme{border-color:color-mix(in srgb,var(--moon-profile-color) 35%,var(--bdc));background:linear-gradient(115deg,color-mix(in srgb,var(--moon-profile-color) 12%,transparent),transparent 80%),var(--bg-4)}
.moon-profile-banner{height:112px;background:linear-gradient(125deg,#191524,var(--moon-item));overflow:hidden;position:relative}
.moon-profile-banner img{display:block;width:100%;height:100%;object-fit:cover}
.moon-profile-banner>span{position:absolute;right:24px;top:12px;color:#ffffff9c;font-family:Georgia,serif;font-size:80px;line-height:1}
.moon-profile-summary{display:flex;align-items:center;flex-wrap:wrap;gap:16px;min-width:0;padding:18px}
.moon-profile-summary .user-profile-head{flex:1 1 260px;min-width:0;gap:12px;margin:0}
.moon-profile-avatar-wrap{flex-shrink:0;padding:6px}
.moon-profile-identity .comment-item__img{width:60px;height:60px;margin:0}
.moon-profile-identity .user-profile-name{font-size:20px;overflow-wrap:anywhere}
.moon-profile-identity .user-profile-id{color:var(--tt-3);font-size:12px}
.moon-profile-gallery{display:flex;flex:0 1 auto;flex-wrap:wrap;gap:10px;max-width:100%;min-width:0}
.moon-profile-collectible{display:flex;align-items:center;gap:10px;flex:0 1 200px;width:200px;max-width:100%;min-width:0;padding:10px;border:1px solid color-mix(in srgb,var(--moon-item) 40%,var(--bdc));border-radius:10px;background:var(--bg-4)}
.moon-profile-artwork{display:flex;align-items:center;justify-content:center;flex:0 0 48px;width:48px;height:56px;overflow:hidden;border-radius:6px;background:color-mix(in srgb,var(--moon-item) 10%,transparent);color:var(--moon-item)}
.moon-profile-artwork img{display:block;width:100%;height:100%;object-fit:contain}
.moon-profile-artwork>span{font-family:Georgia,serif;font-size:40px;line-height:1}
.moon-profile-collectible--sticker .moon-profile-artwork{background:none}
.moon-profile-collectible-copy{min-width:0}
.moon-profile-collectible-copy small{display:block;color:var(--tt-3);font-size:10px;line-height:1.4}
.moon-profile-collectible-copy strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-top:3px;color:var(--tt);font-size:12px;line-height:1.4;overflow-wrap:anywhere}
.moon-profile-frame{outline:3px solid var(--moon-frame-color);outline-offset:4px;border-radius:50%}

@media(max-width:950px){
    .moon-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .moon-studio{grid-template-columns:1fr}
    .moon-studio-note .moon-crescent{display:none}
}
@media(max-width:600px){
    .moon-profile-banner{height:88px}
    .moon-profile-banner>span{right:16px;top:10px;font-size:64px}
    .moon-profile-summary{gap:14px;padding:14px}
    .moon-profile-summary .user-profile-head{flex-basis:100%;gap:10px}
    .moon-profile-identity .comment-item__img{width:48px;height:48px}
    .moon-profile-identity .user-profile-name{font-size:18px}
    .moon-profile-gallery{width:100%;padding-top:14px;border-top:1px solid var(--bdc)}
    .moon-profile-collectible{flex:1 1 180px;width:auto;padding:8px;gap:8px}
    .moon-profile-artwork{flex-basis:40px;width:40px;height:48px}
    .moon-hero{flex-wrap:wrap;gap:12px;padding:16px}
    .moon-hero-icon{flex-basis:42px;width:42px;height:42px;font-size:21px}
    .moon-hero h2{font-size:16px}
    .moon-wallet{display:grid;grid-template-columns:1fr auto;flex-basis:100%;gap:2px;padding:10px 12px}
    .moon-wallet strong{grid-column:2;grid-row:1/3;align-self:center}
    .moon-tabs{gap:7px}
    .moon-tabs a{flex:1 1 auto;padding:8px 10px;font-size:12px}
    .moon-filters{gap:6px}
    .moon-filters a{padding:6px 10px;font-size:11px}
    .moon-section-head{flex-wrap:wrap;gap:10px;align-items:flex-start}
    .moon-section-head h2{font-size:17px}
    .moon-grid{grid-template-columns:1fr}
    .moon-art{height:180px}
    .moon-panel{padding:16px}
    .moon-list-row{flex-wrap:wrap;gap:12px}
    .moon-table{font-size:12px}
    .moon-form-row{grid-template-columns:1fr 80px}
    .moon-footer{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
    .moon-card,.moon-shell .moon-button{transition:none}
    .moon-card:hover{transform:none}
}
/* Payment preparation stays in the wallet; no browser internals in the user flow. */
.moon-payment-progress{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px;border-radius:12px;background:rgba(148,112,255,.12);line-height:1.5}
.moon-payment-progress a{margin-left:8px}
.moon-payment-spinner{flex:0 0 22px;width:22px;height:22px;border:3px solid rgba(148,112,255,.25);border-top-color:#9470ff;border-radius:50%;animation:moon-payment-spin .8s linear infinite}
.moon-payment-spinner[hidden]{display:none}
.moon-payment-progress--error{color:#e78585}
@keyframes moon-payment-spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.moon-payment-spinner{animation-duration:2s}}
.moon-payment-locked{overflow:hidden}
.moon-payment-modal{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(480px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:36px 28px;border:1px solid rgba(166,139,255,.5);border-radius:22px;background:#191625;color:#f7f4ff;text-align:center;box-shadow:0 24px 100px #0009}
.moon-payment-modal::backdrop{background:rgba(6,4,15,.82);backdrop-filter:blur(5px)}
.moon-payment-modal .moon-payment-spinner{width:48px;height:48px;margin:0 auto 24px;border-width:4px}
.moon-payment-modal h2{font-size:23px;margin:0 0 14px;color:inherit}
.moon-payment-modal .moon-payment-progress{display:block;margin:0;padding:0;background:none;color:#f7f4ff;font-size:16px;line-height:1.6}
.moon-payment-modal-note{font-size:13px;line-height:1.6;color:#c7bfdc;margin:18px 0 0}
.moon-payment-modal button{margin-top:24px}
.moon-payment-modal [hidden]{display:none!important}
.moon-payment-success{display:flex;gap:20px;align-items:center;margin:0 0 26px;padding:26px;border:2px solid #77dfac;border-radius:18px;background:linear-gradient(120deg,#123b31,#152d36);color:#f1fff8;box-shadow:0 8px 32px #3bc68726;scroll-margin:100px}
.moon-payment-success__icon{display:grid;place-items:center;flex:0 0 52px;height:52px;border-radius:50%;background:#80edb6;color:#073626;font-size:30px;font-weight:700}
.moon-payment-success h2{margin:0 0 8px;font-size:24px;color:inherit}
.moon-payment-success p{margin:0;line-height:1.6;font-size:16px;color:inherit}
.moon-payment-success:focus{outline:3px solid #abffcd;outline-offset:4px}
.moon-payment-success[hidden]{display:none}
@media(max-width:540px){.moon-payment-success{padding:20px 16px;gap:14px}.moon-payment-success h2{font-size:20px}.moon-payment-success__icon{flex-basis:40px;height:40px}}