:root { --accent: #a85937; --accent-dark: #6f341f; --accent-mid: #c57b58; --accent-soft: #fff1e8; }
body { background: radial-gradient(circle at 73% 7%, rgba(220, 151, 111, .17), transparent 29%), linear-gradient(135deg, #fffdfb 0%, #fbf2ec 100%); }
.hair-design-header .old-photo-heading > div { display: grid; gap: 7px; }
.hair-design-header .old-photo-heading h1 { line-height: 1; }
.hair-design-header .old-photo-heading small { color: #8d6f61; font-family: Georgia, "Songti SC", serif; font-size: 12px; letter-spacing: .08em; }
.hair-design-header .repair-step.is-active span, .hair-design-settings-card .family-step-number { border-color: #965033; background: linear-gradient(135deg, #d08a67, #8b442a); }
.hair-design-header .header-action.is-accent { color: #92492d; border-color: #e0c1af; }

.hair-design-workspace { grid-template-columns: 600px minmax(0, 1fr); }
.hair-design-settings-card { min-height: 760px; padding-top: 22px; border-radius: 22px; }
.hair-design-photo-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.hair-design-upload-note { display: flex; align-items: flex-start; gap: 6px; margin: 10px 0 0; color: #847a73; font-size: 10px; line-height: 1.55; }
.hair-design-upload-note svg { flex: 0 0 auto; width: 14px; height: 14px; color: #aa6243; }

.hair-design-mode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.hair-design-mode { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: center; gap: 9px; min-height: 62px; padding: 9px 11px; border: 1px solid #e6d8cf; border-radius: 11px; color: #665b55; background: #fff; text-align: left; cursor: pointer; }
.hair-design-mode:last-child { grid-column: 1 / -1; }
.hair-design-mode:hover { border-color: #d3a48c; background: #fffaf7; }
.hair-design-mode.is-selected { border: 2px solid #b26340; padding: 8px 10px; color: #7f3c25; background: #fff5ef; box-shadow: 0 4px 10px rgba(157, 76, 43, .1); }
.hair-design-mode > svg { width: 24px; height: 24px; color: #bd6d49; stroke-width: 1.7; }
.hair-design-mode > span { display: grid; gap: 4px; min-width: 0; }
.hair-design-mode strong { font-size: 12px; }
.hair-design-mode small { overflow: hidden; color: #978a82; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

.hair-design-target-section { display: grid; gap: 10px; margin-top: 12px; padding: 12px; border: 1px solid #ead9cf; border-radius: 12px; background: #fffaf7; }
.hair-design-target-section[hidden] { display: none; }
.hair-design-target-section > label { display: grid; gap: 6px; color: #75665e; font-size: 11px; }
.hair-design-target-section input[type="text"] { width: 100%; height: 43px; padding: 0 12px; border: 1px solid #e1d3ca; border-radius: 10px; outline: none; color: #3d3029; background: #fff; font: inherit; font-size: 12px; }
.hair-design-target-section input[type="text"]:focus { border-color: #c88160; box-shadow: 0 0 0 3px rgba(180, 94, 56, .11); }
.hair-design-reference-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); align-items: center; gap: 11px; }
.hair-design-reference-row .change-photo-button { width: 170px; height: 42px; color: #7f472f; border-color: #dfc5b7; background: #fff; }
.hair-design-reference-preview { min-width: 0; color: #94867e; font-size: 10px; line-height: 1.45; }
.hair-design-reference-preview.is-ready { display: grid; grid-template-columns: 46px minmax(0, 1fr); align-items: center; gap: 9px; }
.hair-design-reference-preview img { display: block; width: 46px; height: 54px; object-fit: cover; border: 1px solid #e2cfc4; border-radius: 8px; }
.hair-design-reference-preview strong, .hair-design-reference-preview small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hair-design-reference-preview strong { color: #6e4937; font-size: 11px; }

.hair-design-parameter-grid { gap: 10px; }
.hair-design-parameter-grid select:disabled { color: #9b938e; background: #f2efed; cursor: not-allowed; }
.hair-design-spec { display: grid; align-content: center; gap: 3px; height: 45px; padding: 0 12px; border: 1px solid #ead9cf; border-radius: 10px; background: #fff8f4; }
.hair-design-spec strong { color: #8d492f; font-size: 12px; }
.hair-design-spec small { color: #9a8b83; font-size: 9px; }
.hair-design-identity-note { color: #79472f; border-color: #ead0c0; background: linear-gradient(120deg, #fff8f2, #f9eadf); }
.hair-design-identity-note > svg { color: #b36543; }
.hair-design-settings-card .start-repair-button { background: linear-gradient(105deg, #cf8562 0%, #a45232 58%, #74351f 100%); box-shadow: 0 8px 16px rgba(131, 61, 32, .2); }

.hair-design-result-card .result-heading h2 { color: #824127; }
.hair-design-result-card .result-heading h2 svg { color: #b96743; }
.hair-design-result-stage { padding: 14px; background: radial-gradient(circle at 50% 42%, rgba(247, 217, 198, .62), transparent 32%), linear-gradient(135deg, #f6e9df, #ddc2b2); }
.hair-design-result-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: center; gap: 13px; width: 100%; height: 100%; }
.hair-design-result-slot { position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; min-height: 330px; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: 13px; background: rgba(255,255,255,.72); box-shadow: 0 6px 14px rgba(89, 54, 39, .11); cursor: pointer; }
.hair-design-result-slot.is-selected { border-color: #a75435; box-shadow: 0 0 0 3px rgba(167, 84, 53, .13), 0 7px 18px rgba(89, 54, 39, .15); }
.hair-design-result-slot img { display: block; width: 100%; height: 100%; object-fit: contain; background: #f8ede6; }
.hair-design-result-slot > span { position: absolute; right: 8px; bottom: 8px; padding: 5px 8px; border-radius: 7px; color: #fff; background: rgba(102, 49, 30, .76); font-size: 10px; }
.hair-design-progress-slot { display: grid; align-content: center; justify-items: center; gap: 10px; min-height: 330px; padding: 20px; border-radius: 13px; color: #8d7569; background: rgba(255,255,255,.62); text-align: center; }
.hair-design-progress-slot strong { color: #7a4934; font-size: 13px; }
.hair-design-progress-slot small { font-size: 10px; line-height: 1.5; }
.hair-design-progress-slot.is-failed { color: #9a514b; background: rgba(255,245,243,.82); }
.hair-design-result-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(980px, 100%); gap: 12px; }
.hair-design-result-actions .result-action { height: 54px; padding-inline: 13px; font-size: 15px; }
.hair-design-result-actions .result-action.is-primary { border-color: #93462b; background: linear-gradient(105deg, #c56f49, #813b24); }
.hair-design-use-note { border-color: #ead2c3; background: linear-gradient(90deg, #fff6ef, #fffaf7); }
.hair-design-use-note strong { color: #8a492f; }
.hair-design-use-note .next-step-visual { color: #ad6243; }

@media (max-width: 1320px) {
  .hair-design-workspace { grid-template-columns: 520px minmax(0, 1fr); }
  .hair-design-photo-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hair-design-result-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-y: auto; }
}
@media (max-width: 980px) {
  .hair-design-result-actions { grid-template-columns: 1fr 1fr; }
  .hair-design-result-actions > :last-child { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .hair-design-workspace { grid-template-columns: 1fr; }
  .hair-design-settings-card { height: auto; }
  .hair-design-result-grid { min-height: 430px; }
}
@media (max-width: 560px) {
  .hair-design-header .old-photo-heading small { display: none; }
  .hair-design-photo-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hair-design-mode-grid, .hair-design-parameter-grid { grid-template-columns: 1fr; }
  .hair-design-mode:last-child { grid-column: auto; }
  .hair-design-reference-row { grid-template-columns: 1fr; }
  .hair-design-reference-row .change-photo-button { width: 100%; }
  .hair-design-result-grid { grid-template-columns: 1fr; }
  .hair-design-result-slot, .hair-design-progress-slot { min-height: 370px; }
  .hair-design-result-actions { grid-template-columns: 1fr; }
  .hair-design-result-actions > :last-child { grid-column: auto; }
}