:root { color: #3f3045; background: #fff8f4; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(circle at 20% 10%, #ffe9df, transparent 35%), #fff8f4; }
.page { width: min(100%, 1280px); margin: 0 auto; padding: 24px 20px 32px; }
.card-wrap { width: min(100%, 720px); margin: 0 auto; }
.share-card { position: relative; width: 100%; aspect-ratio: 3 / 4; background: #fffaf7; box-shadow: 0 20px 55px rgba(128, 78, 74, .16); user-select: none; }
#cardCanvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: default; }
#cardCanvas.photo-hover { cursor: grab; }
#cardCanvas.photo-hover:active { cursor: grabbing; }
.upload-prompt { position: absolute; z-index: 1; left: 17%; top: 27%; width: 66%; height: 46%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #806b78; cursor: pointer; text-align: center; border-radius: 9%; }
.upload-prompt input { display: none; }
.upload-prompt strong { color: #61405a; font-family: "Microsoft YaHei", sans-serif; font-size: clamp(16px, 3vw, 25px); }
.upload-prompt > span:last-child { font-size: clamp(12px, 1.55vw, 17px); }
.upload-plus { display: grid; width: clamp(44px, 6vw, 70px); height: clamp(44px, 6vw, 70px); place-items: center; border-radius: 50%; background: #f8ddd6; color: #bf6d64; font-size: clamp(26px, 4vw, 42px); line-height: 1; }
.actions { margin-top: 14px; }
.button { width: 100%; padding: 14px 20px; border: 0; border-radius: 999px; background: #d9786e; color: white; font-size: 16px; cursor: pointer; box-shadow: 0 8px 18px rgba(217,120,110,.24); }
.button:disabled { background: #d9c9c8; cursor: not-allowed; box-shadow: none; }
.secondary-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.small-button { padding: 7px 12px; border: 1px solid #ecc7bf; border-radius: 999px; background: #fff; color: #9a5f5a; font-size: 13px; cursor: pointer; }
.small-button:hover { background: #fff0eb; }
.small-button.danger { color: #b25e58; }
.small-button.download { border-color: #d7b55e; color: #8d6d2e; }
.small-button:disabled { cursor: not-allowed; opacity: .5; }
.edit-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 10px; color: #806b78; font-size: 13px; }
.edit-controls button { width: 28px; height: 28px; padding: 0; border: 1px solid #ecc7bf; border-radius: 50%; background: #fff; color: #9a5f5a; font-size: 18px; cursor: pointer; }
.edit-controls .reset-crop { width: auto; padding: 0 10px; border-radius: 999px; font-size: 12px; }
.edit-controls input { width: min(180px, 32vw); accent-color: #d9786e; }
.status { min-height: 24px; margin: 10px 0 0; text-align: center; color: #907783; font-size: 14px; }
.notice { max-width: 780px; margin: 16px auto 0; text-align: center; color: #ad9298; font-size: 12px; line-height: 1.7; }
.hidden { display: none !important; }
@media (min-width: 900px) { .page { padding-top: 36px; } }
@media (max-width: 560px) { .page { padding: 12px 10px 24px; } .edit-controls { font-size: 12px; } .button { margin-top: 2px; } }