/* Apple-design refinement. Scoped IDs preserve the shared site's sim controls. */
html:has(#card-app), html:has(#viewer-app) { min-height: 100%; height: auto; overflow: auto; scroll-behavior: smooth; scroll-padding-top: 5rem; background: var(--card-page); }
body#card-editor, body#card-viewer { min-height: 100dvh; height: auto; overflow: auto; background: var(--card-page); color: var(--card-text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans TC", sans-serif; font-size: 1rem; line-height: 1.55; font-optical-sizing: auto; -webkit-font-smoothing: antialiased; }
#card-app, #viewer-app { --sim-brand-primary: var(--card-primary); --sim-brand-hover: var(--card-primary-hover); --sim-brand-secondary: var(--card-primary-soft); caret-color: var(--card-primary); accent-color: var(--card-primary); scrollbar-color: #bbbdbd transparent; }
#card-app { display: block; width: 100%; height: auto; min-height: 100dvh; overflow: visible; background: transparent; font-family: inherit; padding: 0 max(1rem, env(safe-area-inset-right)) max(2rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
#card-app *, #viewer-app * { box-sizing: border-box; }
#card-app ::selection, #viewer-app ::selection { color: var(--card-text); background: var(--card-primary-soft-hover); }
#card-app a, #viewer-app a { text-underline-offset: .22em; }
#card-app button, #viewer-app button, #card-app input, #card-app textarea { font-family: inherit; }
#card-app svg, #viewer-app svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.6; flex: 0 0 auto; }
#app-header { max-width: 70rem; min-height: 3.75rem; margin: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
#app-header a { display: inline-flex; align-items: center; gap: .3rem; min-height: 2.75rem; color: var(--card-text); text-decoration: none; font-size: .8125rem; font-weight: 550; }
#app-header > span { font-size: .8125rem; color: var(--card-muted); }
#page-heading { max-width: 70rem; margin: 1.25rem auto 1.75rem; }
#page-heading h1 { font-size: clamp(1.65rem, 2.6vw, 2.1rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.25; margin: 0 0 .5rem; text-wrap: balance; }
#page-heading p { max-width: 42ch; margin: 0; color: var(--card-muted); font-size: .9375rem; line-height: 1.7; }
#mobile-view { display: flex; position: sticky; z-index: 5; top: .5rem; padding: .3rem; margin: 0 auto 1.3rem; border-radius: .9rem; max-width: 28rem; background: rgb(226 227 230 / .88); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); }
#mobile-view button { flex: 1; border: 0; border-radius: .65rem; background: transparent; min-height: 2.75rem; padding: .55rem .4rem; color: var(--card-muted); font-size: .9rem; font-weight: 600; cursor: pointer; }
#mobile-view button[aria-pressed=true] { color: var(--card-text); background: var(--card-surface); box-shadow: 0 2px 6px rgb(0 0 0 / .07); }
#workspace { max-width: 70rem; margin: auto; display: grid; gap: 2rem; align-items: start; }
#editor { min-width: 0; padding: 1rem; border: 1px solid var(--card-border); border-radius: 1rem; background: var(--card-surface); }
#editor-heading { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .25rem .75rem; margin-bottom: 1rem; }
#editor-heading h2 { margin: 0; font-size: 1.125rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.4; }
#save-state { font-size: .8125rem; color: var(--card-muted); }
#editor-tabs { display: flex; padding: .25rem; gap: .2rem; border-radius: .7rem; background: var(--card-subtle); margin-bottom: 1.5rem; }
#editor-tabs button { flex: 1; min-width: 0; min-height: 2.75rem; border: 0; padding: .45rem .25rem; border-radius: .5rem; color: var(--card-muted); background: transparent; cursor: pointer; font-size: .875rem; font-weight: 550; }
#editor-tabs button[aria-selected=true] { color: var(--card-text); background: var(--card-surface); box-shadow: 0 2px 5px rgb(0 0 0 / .07); }
#card-form [role=tabpanel] { display: grid; gap: 1.75rem; }
#card-form fieldset, #style-fields { min-width: 0; border: 0; padding: 0; margin: 0; }
#card-form fieldset { display: grid; gap: .5rem; }
#card-form legend { display: block; width: 100%; float: left; font-size: .875rem; font-weight: 600; line-height: 1.5; margin-bottom: .35rem; color: var(--card-text); }
#identity-fields > legend { display: none; }
#card-form p, #management p { font-size: .875rem; color: var(--card-muted); line-height: 1.7; }
#card-app small, #viewer-app small { font-size: .75rem; color: var(--card-muted); line-height: 1.6; }
#card-form label { font-size: .875rem; font-weight: 550; line-height: 1.5; }
#identity-fields > label:not(:first-of-type), #about-fields > label { margin-top: .5rem; }
#card-form label > small { font-weight: 400; color: var(--card-muted); margin-left: .25rem; }
#card-app input:not([type=radio]):not([type=checkbox]):not([type=file]), #card-app textarea { display: block; width: 100%; min-width: 0; min-height: 3rem; padding: .72rem .85rem; font-size: 1rem; line-height: 1.45; border: 1px solid var(--card-control-border); border-radius: .65rem; color: var(--card-text); background: var(--card-surface); box-shadow: none; transition: border-color 140ms ease-out, box-shadow 140ms ease-out; }
#card-app input::placeholder, #card-app textarea::placeholder { color: var(--card-muted); opacity: 1; }
#card-app textarea { resize: vertical; min-height: 11rem; }
#card-app input:focus, #card-app textarea:focus { border-color: var(--card-primary); }
#role-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
#role-options label { position: relative; display: grid; place-items: center; min-height: 2.85rem; cursor: pointer; border: 1px solid var(--card-border); border-radius: .65rem; color: var(--card-muted); font-size: .875rem; background: var(--card-surface); transition: background 130ms ease-out, border-color 130ms ease-out; }
#role-options label:has(:checked) { color: var(--card-primary); background: var(--card-primary-soft); border-color: var(--card-primary); }
#role-options input, #style-options input { position: absolute; opacity: 0; width: 1px; height: 1px; }
#role-options label:has(:focus-visible), #style-options label:has(:focus-visible) { outline: 3px solid var(--card-primary); outline-offset: 3px; }
#remove-avatar, #download-qr { border: 0; background: transparent; color: var(--card-primary); cursor: pointer; font-size: .8125rem; font-weight: 550; min-height: 2.75rem; }
#photo-field { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .75rem; align-items: start; margin-top: 1rem; padding-top: 1.25rem; border-top: 1px solid var(--card-border); }
#avatar-preview { display: grid; place-items: center; width: 3rem; height: 3rem; flex: 0 0 auto; overflow: hidden; border-radius: 50%; background: var(--card-primary-soft); color: var(--card-primary); font-size: 1.4rem; font-weight: 550; }
#avatar-preview img { width: 100%; height: 100%; object-fit: cover; }
#photo-field > div:last-child { min-width: 0; flex: 1; display: grid; gap: .2rem; }
#photo-field label { font-size: .875rem; }
#card-app input[type=file] { display: block; width: 100%; min-height: 2.75rem; min-width: 0; padding: 0; border: 1px solid transparent; border-radius: .65rem; font: inherit; font-size: .75rem; color: var(--card-muted); }
#card-app input[type=file]::file-selector-button { font: inherit; min-height: 2.5rem; padding: .3rem .65rem; color: var(--card-primary); border: 0; border-radius: .5rem; background: var(--card-primary-soft); margin-right: .6rem; cursor: pointer; }
#remove-avatar { justify-self: start; min-height: 2rem; }
#about-count { text-align: right; font-variant-numeric: tabular-nums; }
#contact-fields [data-contact-row] { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .25rem .5rem; align-items: center; margin-top: .5rem; }
#contact-fields [data-contact-row] > input { grid-column: 1 / -1; }
#card-form [data-visibility] { display: inline-flex; align-items: center; gap: .45rem; min-height: 2.75rem; cursor: pointer; font-size: .75rem; color: var(--card-muted); }
#card-form [data-visibility] input { appearance: none; -webkit-appearance: none; display: block; width: 2.25rem; height: 1.375rem; background: var(--card-subtle); border: 0; border-radius: 1rem; position: relative; cursor: pointer; transition: background 140ms ease-out; }
#card-form [data-visibility] input::before { content: ''; position: absolute; top: .1875rem; left: .1875rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--card-surface); box-shadow: 0 1px 3px rgb(0 0 0 / .16); transition: transform 150ms ease-out; }
#card-form [data-visibility] input:checked { background: var(--card-primary); }
#card-form [data-visibility] input:checked::before { transform: translateX(.875rem); }
#link-rows { display: grid; gap: 1rem; }
#link-rows > section { min-width: 0; }
#link-rows button { justify-self: end; min-height: 2.5rem !important; padding: .25rem .7rem !important; font-size: .75rem !important; }
#links-fields > button { justify-self: start; width: auto; margin-top: .5rem; }
#publish-actions { display: grid; gap: .75rem; padding-top: 1.5rem; }
#publish-actions > button { width: 100%; }
#publish-actions p { margin: 0; text-align: center; font-size: .8125rem; color: var(--card-muted); }
#editor #status { margin: .75rem 0 0; font-size: .8125rem; color: var(--card-muted); line-height: 1.65; }
#editor #error, #viewer-app #error { padding: .85rem 1rem; border-radius: .65rem; color: var(--card-danger); background: var(--card-danger-tint); font-size: .875rem; margin-top: .8rem; overflow-wrap: anywhere; }
#management { margin-top: 1rem; padding-top: .5rem; border-top: 1px solid var(--card-border); }
#management summary { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; cursor: pointer; color: var(--card-muted); font-size: .8125rem; list-style: none; }
#management summary::-webkit-details-marker { display: none; }
#management summary::after { content: ''; width: .4rem; height: .4rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-right: .25rem; }
#management[open] summary::after { transform: rotate(225deg); }
#management p { margin: .4rem 0 1rem; }
#management label { font-size: .875rem; }
#preview { min-width: 0; max-width: 36rem; width: 100%; margin: 0 auto; scroll-margin-top: 5rem; }
#preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: .1rem 0 1.1rem; padding: 0 .25rem; }
#preview-title { margin: 0; font-size: .9375rem; color: var(--card-text); font-weight: 600; }
#publication-state { color: var(--card-muted); font-size: .8125rem; }
#style-fields { margin-top: 1.4rem; }
#style-fields > legend { width: 100%; text-align: center; font-size: .75rem; color: var(--card-muted); margin-bottom: .55rem; }
#style-options { display: flex; justify-content: center; gap: .65rem; }
#style-options label { position: relative; display: flex; align-items: center; gap: .4rem; min-height: 2.75rem; color: var(--card-muted); cursor: pointer; border-radius: 2rem; padding: .2rem .45rem; font-size: .75rem; }
#style-options label::before { content: ''; width: .875rem; height: .875rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--card-page); }
#style-options label:has(:checked) { color: var(--card-text); font-weight: 600; }
#style-options label:has(:checked)::before { outline: 1px solid var(--card-control-border); outline-offset: 4px; }
#draft-note { margin-top: .6rem; text-align: center; color: var(--card-muted); font-size: .75rem; line-height: 1.6; }
#share-panel { display: grid; gap: .85rem; margin-top: 1.75rem; padding-top: 1.6rem; border-top: 1px solid var(--card-border); }
#share-panel h2 { margin: 0; font-size: 1rem; font-weight: 600; letter-spacing: -.015em; }
#share-url-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
#share-url-row label { grid-column: 1 / -1; font-size: .75rem; color: var(--card-muted); }
#share-url-row input { font-size: .8125rem !important; }
#share-url-row button { min-width: 3.5rem; }
#secondary-share-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .25rem 1rem; }
#secondary-share-actions a { display: inline-flex; align-items: center; gap: .2rem; min-height: 2.75rem; color: var(--card-primary); text-decoration: none; font-size: .8125rem; font-weight: 500; }
#share-panel > small { text-align: center; }
#card-app .sim-btn, #viewer-app .sim-btn { min-height: 3rem; padding: .72rem 1rem; border-radius: .7rem; font-size: .875rem; font-weight: 550; line-height: 1.5; text-align: center; text-decoration: none; cursor: pointer; white-space: normal; transition: background-color 140ms ease-out, transform 120ms ease-out; }
#card-app .sim-btn:active, #viewer-app .sim-btn:active, #mobile-view button:active, #editor-tabs button:active { transform: scale(.98); }
#card-app .sim-btn-reset, #viewer-app .sim-btn-reset, #card-app .sim-btn-secondary, #viewer-app .sim-btn-secondary { background: var(--card-primary-soft); color: var(--card-primary); }
#card-app .sim-btn-reset:hover, #viewer-app .sim-btn-reset:hover, #card-app .sim-btn-secondary:hover, #viewer-app .sim-btn-secondary:hover { background: var(--card-primary-soft-hover); }
#card-app .sim-btn-danger { background: var(--card-danger); color: var(--card-surface); }
#card-app .sim-btn-danger:hover { background: var(--card-danger-hover); }
#card-app .sim-btn-row, #viewer-app .sim-btn-row { display: flex; flex-wrap: wrap; gap: .65rem; }
#card-app :focus-visible, #viewer-app :focus-visible { outline: 3px solid var(--card-primary); outline-offset: 3px; }
#card-app button:disabled, #viewer-app button:disabled { opacity: .55; cursor: wait; }
#viewer-app { max-width: 36rem; min-height: 100dvh; height: auto; overflow: visible; margin: auto; padding: max(2rem, env(safe-area-inset-top)) 1rem max(2rem, env(safe-area-inset-bottom)); }
#viewer-app #status { margin-bottom: 1rem; text-align: center; color: var(--card-muted); font-size: .8125rem; }
#viewer-app #status:empty { margin: 0; }
#viewer-actions { display: grid; gap: .65rem; margin: 1.4rem 0 .8rem; }
#viewer-contact { display: grid; margin: 1rem 0 0; gap: .55rem; }
#viewer-contact #save-contact { width: 100%; }
#viewer-contact p { font-size: .75rem; line-height: 1.65; color: var(--card-muted); text-align: center; }
#contact-status:empty { display: none; }
#create-own { display: block; min-height: 2.75rem; padding: .75rem; color: var(--card-muted); text-align: center; font-size: .75rem; }
#viewer-entry-help { color: var(--card-muted); font-size: .875rem; line-height: 1.8; margin: 0 0 1.25rem; }
#viewer-app #create-own.sim-btn-primary { color: var(--card-surface); }
@media (width < 768px) {
  #card-editor[data-card-view=edit] #preview, #card-editor[data-card-view=preview] #editor { display: none; }
}
@media (min-width: 768px) {
  #card-app { padding-right: 2rem; padding-left: 2rem; }
  #app-header { min-height: 3.25rem; }
  #page-heading { margin-top: .75rem; margin-bottom: 1.5rem; }
  #mobile-view { display: none; }
  #workspace { grid-template-columns: minmax(0, .95fr) minmax(0, 1fr); gap: 1.5rem; }
  #editor { padding: 1.25rem; }
  #preview { position: sticky; top: 1.5rem; max-width: 36rem; }
}
@media (min-width: 1024px) {
  #workspace { grid-template-columns: minmax(0, 30rem) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); }
  #editor { padding: 1.75rem; }
  #page-heading { margin-top: .75rem; }
}
@media (prefers-reduced-motion: reduce) {
  html:has(#card-app), html:has(#viewer-app) { scroll-behavior: auto; }
  #card-app *, #viewer-app * { transition: none !important; scroll-behavior: auto !important; }
  #card-app button:active, #viewer-app button:active { transform: none !important; }
}
@media (prefers-reduced-transparency: reduce) { #mobile-view { background: var(--card-subtle); backdrop-filter: none; -webkit-backdrop-filter: none; } }
@media (prefers-contrast: more) {
  #mobile-view { background: var(--card-subtle); backdrop-filter: none; }
  #card-app input:not([type=radio]):not([type=checkbox]), #card-app textarea, #role-options label { border-color: var(--card-muted); }
  #editor-tabs button[aria-selected=true], #mobile-view button[aria-pressed=true] { outline: 1px solid var(--card-muted); }
  #card-sheet, #editor { outline: 1px solid var(--card-control-border); }
}

#preview-publish { width: 100%; margin-top: 1.2rem; }
@media (min-width: 768px) { #preview-publish { display: none; } }

#preview-feedback { color: var(--card-primary); font-size: .75rem; line-height: 1.7; text-align: center; margin-top: .7rem; }
#preview-feedback:empty { margin: 0; }
@media (min-width: 768px) { #preview-feedback { display: none; } }
/* A focused, native modal keeps cropping separate from the unsaved profile. */
#card-app #edit-avatar { justify-self: start; min-height: 2.75rem; border: 0; background: transparent; color: var(--card-primary); font-size: .8125rem; font-weight: 550; cursor: pointer; }
#avatar-crop-dialog { position: fixed; inset: 0; margin: auto; width: min(28rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1.5rem; border: 0; border-radius: 1.25rem; background: var(--card-surface); color: var(--card-text); box-shadow: 0 20px 70px rgb(0 0 0 / .2); }
#avatar-crop-dialog::backdrop { background: rgb(20 25 22 / .48); }
#crop-heading h2 { font-size: 1.25rem; font-weight: 650; letter-spacing: -.02em; }
#crop-heading p { font-size: .8125rem; line-height: 1.7; color: var(--card-muted); margin-top: .35rem; }
#crop-stage { width: min(100%, 20rem); aspect-ratio: 1; margin: 1.2rem auto .75rem; }
#avatar-crop-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; border-radius: .75rem; }
#avatar-crop-canvas[data-dragging=true] { cursor: grabbing; }
#crop-shape-help { text-align: center; color: var(--card-muted); font-size: .75rem; margin-bottom: 1.1rem; }
#crop-zoom-control { padding: 0; }
#crop-zoom-control .sim-slider-header { display: flex; justify-content: space-between; margin-bottom: .3rem; }
#crop-zoom-control .sim-slider-label, #crop-zoom-value { font-size: .8125rem; font-weight: 500; color: var(--card-text); }
#crop-zoom-value { font-variant-numeric: tabular-nums; }
#crop-zoom-control input { min-height: 2.75rem; margin: 0; }
#crop-tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .25rem; }
#crop-tools button { min-height: 2.75rem; background: transparent; border: 0; color: var(--card-primary); font-size: .8125rem; font-weight: 550; white-space: nowrap; cursor: pointer; }
#crop-tools small { font-size: .6875rem; text-align: right; }
#crop-source-note { color: var(--card-muted); font-size: .75rem; margin-top: .7rem; }
#crop-error { color: var(--card-danger); font-size: .8125rem; margin-top: .7rem; }
#crop-actions { margin-top: 1.2rem; }
@media (prefers-contrast: more) { #avatar-crop-dialog { outline: 1px solid var(--card-muted); } #avatar-crop-dialog::backdrop { background: rgb(0 0 0 / .7); } }
#photo-actions { display: flex; flex-wrap: wrap; gap: .25rem .75rem; align-items: center; min-height: 2.75rem; }
#photo-actions button { min-height: 2.75rem; }
#card-app #crop-zoom { padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
#crop-zoom-value { padding: 0; background: transparent; font-family: inherit; }

/* Optional controls and feedback reserve space instead of moving the next action. */
#card-app #card-form input[type=file]:focus { border-color: transparent; }
#card-app #status { min-height: 4.95em; }
#card-app #preview-feedback { min-height: 5.1em; }
#card-app #preview-feedback:empty { margin-top: .7rem; }
@media (width < 768px) {
  #card-app #preview-publish[hidden] { display: block !important; visibility: hidden; }
}

#card-app :is(#photo-actions, #cover-image-actions) button:disabled { cursor: default; }

/* Keep narrow forms legible without shrinking controls or their hit areas. */
#editor :is(#avatar-help, #tags-help, #about-count, #cover-upload-help), #management small { font-size: .8125rem; }
#editor :is(#identity-fields, #about-fields, #contact-fields, #links-fields) > p { margin: 0 0 .25rem; }
#editor input[type=file] { font-size: .8125rem; }
#card-app #editor :is(#edit-avatar, #remove-avatar) { padding: 0; font-size: .8125rem; }
#editor :is(#identity-fields, #about-fields, #contact-fields, #links-fields) > legend { margin-bottom: .5rem; }
@media (min-width: 480px) {
  #photo-field { grid-template-columns: 3.75rem minmax(0, 1fr); gap: 1rem; }
  #avatar-preview { width: 3.75rem; height: 3.75rem; }
}