/* Approved creation prototype, scoped to this screen. Shared graphics and layouts stay intact. */
.mobile[data-screen='create'] { padding-bottom: 0; }
.article-create { min-width: 0; color: #f5dbc2; }
.create-navigation { min-height: 34px; padding: 0 12px; display: flex; justify-content: space-between; align-items: center; gap: 12px; background: linear-gradient(#30170a, #1d0c05); border-bottom: 1px solid #6c3819; }
.create-navigation button { min-height: 34px; padding: 0; border: 0; background: none; color: #efd0a4; font-weight: 700; font-size: 12px; white-space: nowrap; }
#create-collection { min-width: 0; font-size: 10px; text-align: right; text-transform: uppercase; letter-spacing: .05em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.create-heading { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 11px 12px 6px; }
.create-heading h1 { font-size: 14px; letter-spacing: .55px; margin: 0; color: #ffddb5; text-transform: uppercase; }
.create-unsaved { font-size: 10px; color: #c6a37d; display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.create-unsaved > span { background: #dbac39; width: 7px; height: 7px; border-radius: 50%; box-shadow: 0 0 5px #ab6b1b; }
.create-photo-block { padding: 0 8px; }
.create-photo-well { position: relative; min-height: 205px; border-radius: 10px; border: 1px solid #a5773e; background: linear-gradient(160deg, #201e1b, #0e0e0e 65%, #1c1812); box-shadow: inset 0 0 0 2px #24130b, inset 0 0 0 3px #765123, inset 0 3px 14px #030202, 0 1px 1px #1a0903; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.create-photo-empty { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 20px 10px; }
.create-camera-icon { width: 39px; height: 33px; color: #c99b5c; opacity: .86; }
.create-capture { display: flex; align-items: center; gap: 7px; justify-content: center; font-size: 13px; font-weight: 700; color: #efc88c; min-height: 44px; min-width: 132px; border: 1px solid #b9843c; background: linear-gradient(#32302e, #171513); box-shadow: inset 0 0 0 2px #1c1510, 0 2px 2px #070503; border-radius: 8px; }
.create-capture svg, .create-secondary svg, .create-save svg { width: 17px; height: 17px; flex-shrink: 0; }
.create-photo-prompt { font-size: 11px; color: #ac967d; letter-spacing: .1px; }
.create-photo-counter { position: absolute; top: 8px; right: 9px; border: 1px solid #7d5c3e; border-radius: 16px; background: #111b; color: #dfcbac; font-size: 11px; padding: 5px 8px; z-index: 1; }
.create-photo-preview { max-height: 240px; max-width: 100%; width: 100%; height: 235px; object-fit: contain; image-orientation: from-image; }
.create-photo-ops { min-height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 3px 6px 0; gap: 10px; }
.create-secondary { appearance: none; background: transparent; color: #e6bd82; font-size: 12px; border: 0; padding: 8px 4px; min-height: 44px; display: inline-flex; align-items: center; gap: 7px; }
.create-photo-hint { font-size: 10px; color: #c4a78a; text-align: right; }
.create-thumbnails { display: flex; gap: 6px; overflow-x: auto; padding: 1px 9px 8px; margin: 0 8px; min-height: 66px; align-items: stretch; scrollbar-width: thin; scrollbar-color: #97744c transparent; }
.create-thumbnail { flex: 0 0 56px; width: 56px; height: 58px; padding: 0; border-radius: 5px; border: 1px solid #846039; background: #221914; display: flex; align-items: center; justify-content: center; color: #917559; box-shadow: inset 0 0 0 1px #251405; }
.create-thumbnail[aria-current='true'] { border-color: #66ded2; box-shadow: 0 0 0 1px #25c5b7, 0 0 5px #009c97; }
.create-thumbnail img { width: 100%; height: 100%; object-fit: contain; image-orientation: from-image; }
.create-thumbnail-add { border-style: dashed; color: #e6bc79; font-size: 28px; line-height: 1; }
.create-fields-panel { margin: 5px 8px 0; border: 1px solid #ad722b; border-radius: 8px; box-shadow: inset 0 0 0 1px #512506, 0 1px 2px #1b0b05; background: linear-gradient(160deg, #8e521d40, #48240c20); padding: 7px 7px 8px; }
.create-fields-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 3px 5px 6px; border-bottom: 1px solid #6e4227; margin-bottom: 3px; }
.create-fields-heading strong { font-size: 11px; letter-spacing: .4px; color: #efc794; }
.create-fields-heading small { font-size: 10px; color: #ac896a; }
.create-field { display: grid; grid-template-columns: 32% minmax(0, 68%); align-items: center; min-height: 43px; padding: 3px 1px; }
.create-field label { font-size: 11px; color: #e4bd86; text-align: right; padding-right: 11px; line-height: 1.12; overflow-wrap: anywhere; font-weight: 700; letter-spacing: .08px; text-transform: uppercase; }
.create-field label.required::after { content: ' *'; color: #ddae5c; }
.create-field input, .create-field textarea, .create-field select { min-width: 0; width: 100%; border: 1px solid #856036; border-radius: 5px; background: linear-gradient(#191817, #141414); font: 13px Arial, Helvetica, sans-serif; color: #f1e4d2; padding: 9px 10px; box-shadow: inset 0 1px 5px #050505; resize: vertical; min-height: 37px; }
.create-field input::placeholder, .create-field textarea::placeholder { color: #8b8178; }
.create-field input:focus, .create-field textarea:focus, .create-field select:focus { border-color: #71d6cc; outline: 1px solid #47a69e; box-shadow: inset 0 1px 4px #060505; }
.create-field textarea { height: 63px; min-height: 63px; line-height: 1.3; }
.create-field select { appearance: none; padding-right: 30px; background-image: linear-gradient(45deg, transparent 50%, #d9b57d 50%), linear-gradient(135deg, #d9b57d 50%, transparent 50%), linear-gradient(#191817, #141414); background-position: calc(100% - 17px) 16px, calc(100% - 11px) 16px, center; background-size: 6px 6px, 6px 6px, 100%; background-repeat: no-repeat; }
.create-field-error { grid-column: 2; color: #ffceb4; font-size: 11px; margin: 4px 0; }
.create-form-note { font-size: 10px; color: #d1af89; margin: 7px 3px 0; border-top: 1px solid #6e4227; padding: 9px 4px 2px; line-height: 1.4; }
.create-actions { margin: 6px 12px 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0 calc(35px + env(safe-area-inset-bottom, 0px)); }
.create-cancel { border: 0; border-radius: 18px; background: #2a1207; color: #f5d4b5; min-width: 92px; min-height: 44px; font-size: 13px; font-weight: 600; }
.create-save { display: flex; align-items: center; gap: 8px; border: 1px solid #b48137; border-radius: 8px; background: linear-gradient(#35261b, #191614); box-shadow: inset 0 0 0 1px #5b3919, 0 2px 5px #211207; color: #f9d2a0; font-size: 13px; font-weight: bold; padding: 10px 13px; min-height: 44px; }
.create-save:disabled { opacity: .65; cursor: wait; }
.create-message { margin: 8px 12px; color: #ffceb4; font-size: 12px; line-height: 1.4; overflow-wrap: anywhere; }
.article-create button:focus-visible { outline: 2px solid #87fff2; outline-offset: 2px; }
@media (max-width: 375px) {
  .create-photo-well { min-height: 192px; }
  .create-field label { font-size: 10px; }
  .create-field input, .create-field textarea, .create-field select { font-size: 12px; }
  .create-photo-hint { font-size: 9px; }
}
@media (min-width: 430px) {
  .create-photo-well { min-height: 222px; }
  .create-field { min-height: 46px; }
  .create-field input, .create-field textarea, .create-field select { font-size: 14px; }
  .create-field label { font-size: 12px; }
}