:root {
  --ink: #111111;
  --muted: #777777;
  --line: #e8e8e8;
  --paper: #ffffff;
  --card: #ffffff;
  --champagne: #111111;
  --soft: #f6f6f6;
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html.swipe-locking,
html.swipe-locking body {
  overflow-x: clip;
}

html.swipe-locking .shell {
  overflow-x: clip;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  color: var(--ink);
  background: #ffffff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  zoom: .855;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

input,
textarea,
select,
[contenteditable="true"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

.pull-to-refresh {
  position: fixed;
  top: 10px;
  left: 50%;
  z-index: 120;
  min-width: 124px;
  padding: 9px 18px;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  color: rgba(255, 255, 255, .88);
  background: rgba(0, 0, 0, .68);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 13px;
  text-align: center;
  transform: translate(-50%, calc(var(--pull-distance, 0px) - 100%));
}

.dp-dialog-mask {
  position: fixed;
  inset: 0;
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(0, 0, 0, .36);
}

.dp-dialog {
  width: min(84vw, 360px);
  border: 1px solid #dddddd;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .16);
  padding: 22px 18px 18px;
}

.dp-dialog-title {
  margin: 0;
  color: #111111;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.35;
  text-align: center;
}

.dp-dialog-message {
  margin: 14px 0 0;
  color: #333333;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.65;
  text-align: center;
  white-space: pre-wrap;
}

.dp-dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 20px;
}

.dp-dialog-actions.single {
  grid-template-columns: 1fr;
}

.dp-dialog-actions.single .dp-dialog-cancel {
  display: none;
}

.dp-dialog-actions button {
  min-height: 44px;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 800;
}

.dp-dialog-cancel {
  border: 1px solid #d8d8d8;
  color: #111111;
  background: #ffffff;
}

.dp-dialog-confirm {
  border: 1px solid #111111;
  color: #ffffff;
  background: #111111;
}

body.dialog-open {
  overflow: hidden;
}

.pull-to-refresh.ready,
.pull-to-refresh.refreshing {
  color: #fff;
  background: rgba(0, 0, 0, .78);
}

.pull-to-refresh.has-gif {
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.pull-refresh-gif {
  display: block;
  width: 84px;
  height: 84px;
  border-radius: 10px;
  object-fit: contain;
}

.pull-to-refresh.has-gif span {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.shell > .hero,
.shell > .home-quick-menu,
.shell > .panel {
  transform: translateY(var(--pull-distance, 0));
  transition: transform .26s ease;
}

html.pull-tracking .shell > .hero,
html.pull-tracking .shell > .home-quick-menu,
html.pull-tracking .shell > .panel {
  transition: none;
}

.shell {
  position: relative;
  width: min(430px, 100%);
  min-height: 100vh;
  margin: 0 auto;
  padding: 18px 14px calc(92px + env(safe-area-inset-bottom));
  overflow-x: clip;
}

.hero {
  min-height: 214px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 20px;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 8px;
  background: linear-gradient(145deg, rgba(0, 0, 0, .96), rgba(26, 26, 26, .96));
  box-shadow: 0 18px 38px rgba(0, 0, 0, .14);
}

.hero[hidden] {
  display: none;
}

.home-quick-menu {
  display: grid;
  grid-template-columns: repeat(var(--home-quick-count, 4), minmax(0, 1fr));
  align-items: start;
  margin: 12px 0 10px;
  padding: 6px 0 8px;
  gap: 0;
}

.home-quick-menu[hidden] {
  display: none;
}

.home-quick-item {
  display: flex;
  min-width: 0;
  min-height: 74px;
  padding: 4px 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #111;
  font-size: 13.2px;
  font-weight: 600;
  line-height: 1.15;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  gap: 8px;
  box-shadow: none;
}

.home-quick-icon-wrap {
  width: 51px;
  height: 51px;
  border-radius: 14px;
  background: #303030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex: 0 0 auto;
}

.home-quick-label {
  display: block;
  width: 100%;
  text-align: center;
  white-space: normal;
}

.home-quick-img {
  width: 30px;
  height: 30px;
  object-fit: contain;
}

.home-quick-icon {
  position: relative;
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 21px;
  font-weight: 700;
  line-height: 1;
}

.home-quick-icon::before {
  content: "★";
}

.home-quick-icon-card::before {
  content: "券";
  font-size: 15px;
}

.home-quick-icon-yen::before {
  content: "¥";
  font-size: 20px;
}

.home-quick-icon-closet::before {
  content: "搭";
  font-size: 15px;
}

.home-quick-icon-bag::before {
  content: "包";
  font-size: 15px;
}

.home-quick-icon-user::before,
.home-quick-icon-profile::before {
  content: "人";
  font-size: 15px;
}

.home-quick-icon-home::before,
.home-quick-icon-today::before {
  content: "首";
  font-size: 15px;
}

.home-quick-icon-calendar::before {
  content: "日";
  font-size: 15px;
}

.home-quick-icon-pin::before {
  content: "位";
  font-size: 15px;
}

.home-quick-icon-bell::before {
  content: "铃";
  font-size: 15px;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(115deg, transparent 0 52%, rgba(255, 255, 255, .14) 52% 53%, transparent 53%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 62px);
  pointer-events: none;
}

.hero-meta {
  position: relative;
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  letter-spacing: 0;
}

.hero-copy {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
}

.eyebrow {
  color: #ffffff;
  font-size: 13px;
}

h1 {
  margin: 8px 0;
  font-size: 38px;
  line-height: 1.08;
  letter-spacing: 0;
  font-weight: 650;
}

.brand-logo {
  display: block;
  width: min(224px, 100%);
  height: auto;
  margin: 0 auto 12px;
}

p {
  margin: 0;
  line-height: 1.55;
}

.hero p {
  max-width: 310px;
  margin: 0 auto;
  color: rgba(255, 255, 255, .78);
  font-size: 14px;
}

.hero-usage {
  margin-top: 16px;
  padding: 5px 14px;
  color: rgba(255, 255, 255, .88);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 4px;
  background: rgba(255, 255, 255, .06);
  font-size: 12px;
  line-height: 1.3;
}

.hero-usage-link {
  color: inherit;
  cursor: pointer;
}

.hero-usage-link:focus,
.hero-usage-link:active {
  outline: 0;
}

.hero-gender-link {
  display: inline !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  appearance: none !important;
  -webkit-appearance: none !important;
  font: inherit !important;
  line-height: inherit !important;
  text-decoration: none !important;
  vertical-align: baseline !important;
  cursor: pointer;
}

.hero-gender-link:hover,
.hero-gender-link:focus,
.hero-gender-link:active {
  color: inherit !important;
  background: transparent !important;
  box-shadow: none !important;
  outline: 0 !important;
  text-decoration: none !important;
}

.quota-summary-card {
  cursor: pointer;
}

.quota-summary-card:focus,
.quota-summary-card:active {
  outline: 0;
}

.tabs {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  width: min(430px, 100%);
  height: calc(64px + env(safe-area-inset-bottom));
  margin: 0 auto;
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  border-top: 0;
  background: transparent;
  isolation: isolate;
}

.tabs::before {
  content: "";
  position: absolute;
  inset: auto auto 0 50%;
  z-index: -1;
  width: calc(100vw / .855);
  height: calc(100% / .95);
  transform: translateX(-50%);
  border-top: 1px solid var(--line);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -10px 24px rgba(0, 0, 0, .06);
  backdrop-filter: blur(12px);
}

body.ai-stylist-page .tabs {
  display: none;
}

body.ai-stylist-page {
  overflow: hidden;
}

body.ai-stylist-page .shell {
  min-height: 100dvh;
  padding-bottom: 0;
}

body.ai-stylist-page #aiStylist.panel.active {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  min-height: 100dvh;
  margin-top: 0;
  padding-top: 0;
}

body.ai-stylist-page #aiStylist .subpage-head {
  flex: 0 0 auto;
  margin-bottom: 10px;
}

.today-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
  margin-bottom: 10px;
}

.today-actions .primary {
  min-height: 40px;
  font-size: 14px;
}

.today-actions .primary {
  margin: 0;
}

.today-actions .generate-today-wide {
  grid-column: 1 / -1;
  min-height: 52px;
  border: 1px dashed #999;
  color: #111;
  background: #f8f8f8;
  font-size: 15.4px;
  font-weight: 650;
  box-shadow: none;
}

.today-control-card {
  margin: 14px 0 16px;
  padding: 14px 12px 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.today-generate-note {
  margin: 17px 0 5px;
  color: #aaaaaa;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
}

.week-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 9px;
  width: 100%;
  max-width: 100%;
  margin: 12px 0 12px;
  overflow-x: scroll;
  overflow-y: hidden;
  padding: 0 24px 2px 0;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-snap-type: x proximity;
}

.week-tabs::-webkit-scrollbar {
  display: none;
}

.week-tabs {
  scrollbar-width: none;
}

.week-tabs button {
  flex: 0 0 auto;
  scroll-snap-align: start;
  height: 34px;
  padding: 0 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 13px;
}

.week-tabs button.active {
  color: #ffffff;
  border-color: #111111;
  background: #111111;
}

.week-tabs button:disabled {
  color: #b8b8b8;
  background: #f6f6f6;
  cursor: not-allowed;
  opacity: 1;
}

.week-day-card {
  display: grid;
  gap: 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.week-day-card > strong {
  text-align: center;
  font-size: 16px;
}

.week-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.today-extra-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.today-result-title {
  display: block;
  text-align: center;
  font-size: 16px;
  line-height: 1.4;
}

.today-weather-line {
  display: block;
  margin: 4px 0 8px;
  color: #aaaaaa;
  text-align: center;
  font-size: 12px;
  line-height: 1.35;
}

#outfit .today-result-title {
  margin-top: 0;
}

#outfit .today-weather-line {
  margin: 8px 0 20px;
}

button,
.photo-btn {
  position: relative;
  border: 0;
  border-radius: 7px;
  cursor: pointer;
  font: inherit;
}

button:disabled,
.photo-btn.is-loading {
  cursor: wait;
  opacity: .78;
}

button.is-counting {
  color: #777777;
  background: #e5e5e5;
  cursor: wait;
  opacity: 1;
}

.locked {
  opacity: .56;
  cursor: not-allowed;
}

input:disabled,
select:disabled {
  color: #999;
  background: #f7f7f7;
}

.is-loading {
  pointer-events: none;
}

.is-loading::after {
  content: "";
  width: 13px;
  height: 13px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spin .75s linear infinite;
}

.login-action.is-loading::after,
.tab.is-loading::after,
.cloth-actions button.is-loading::after {
  position: absolute;
  right: 8px;
  margin-left: 0;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.login-card {
  display: grid;
  grid-template-columns: 44px 1fr 64px;
  gap: 12px;
  align-items: center;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  box-shadow: none;
}

.avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  background: #111111;
  color: #ffffff;
  text-align: center;
  line-height: 44px;
  font-size: 15px;
  font-weight: 700;
}

.avatar.empty {
  background: #111111;
}

.login-copy {
  min-width: 0;
}

.login-copy strong,
.login-copy span {
  display: block;
}

.login-copy strong {
  font-size: 15px;
  font-weight: 650;
}

.login-copy span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

.phone-input {
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #f8f8f8;
  color: var(--ink);
  font-size: 14px;
}

.login-action,
.login-ghost {
  height: 34px;
  color: #fff;
  background: #111111;
  font-size: 13px;
}

.login-ghost {
  color: var(--muted);
  border: 1px solid var(--line);
  background: #ffffff;
}

.tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 52px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  line-height: 1.1;
}

.tab .button-label {
  display: block;
  margin: 0;
  line-height: 1.05;
}

.tab.active {
  color: var(--ink);
  background: transparent;
  box-shadow: none;
}

.tab-icon {
  position: relative;
  display: block;
  width: 26px;
  height: 26px;
  transform: scale(1.14);
  transform-origin: center;
}

.tab-img {
  display: block;
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.tab-icon::before,
.tab-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border-color: currentColor;
}

.tab-icon-today::before {
  left: 4px;
  top: 3px;
  width: 14px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.tab-icon-today::after {
  left: 7px;
  top: 7px;
  width: 8px;
  height: 2px;
  border-top: 2px solid currentColor;
  box-shadow: 0 5px 0 currentColor;
}

.tab-icon-home::before {
  left: 4px;
  top: 8px;
  width: 14px;
  height: 11px;
  border: 2px solid currentColor;
  border-top: 0;
  border-radius: 2px;
}

.tab-icon-home::after {
  left: 5px;
  top: 3px;
  width: 12px;
  height: 12px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.tab-icon-closet::before {
  left: 3px;
  top: 6px;
  width: 16px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 2px;
}

.tab-icon-closet::after {
  left: 7px;
  top: 2px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.tab-icon-bag::before {
  left: 3px;
  top: 7px;
  width: 16px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.tab-icon-bag::after {
  left: 7px;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
}

.tab-icon-profile::before {
  left: 7px;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.tab-icon-profile::after {
  left: 4px;
  top: 13px;
  width: 14px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 9px 9px 3px 3px;
}

.tab-icon-user::before {
  left: 7px;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.tab-icon-user::after {
  left: 4px;
  top: 13px;
  width: 14px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 9px 9px 3px 3px;
}

.tab-icon-star::before {
  left: 3px;
  top: 3px;
  width: 16px;
  height: 16px;
  background: currentColor;
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 92%, 50% 70%, 21% 92%, 32% 57%, 2% 35%, 39% 35%);
}

.panel {
  display: none;
}

.panel.active {
  display: block;
  margin-top: 16px;
}

img {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
}

.intro,
.result,
label,
.cloth-card {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  box-shadow: none;
}

/* AI hairstyle */
.hairstyle-intro,
.hairstyle-requirements,
.hairstyle-library,
.hairstyle-result,
.hairstyle-selfie-preview {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.hairstyle-intro strong,
.hairstyle-requirements > strong,
.hairstyle-library-head strong {
  display: block;
  font-size: 16px;
}

.hairstyle-intro {
  padding: 17px;
  margin-bottom: 12px;
}

.closet-intro-card {
  margin: 8px 0 10px;
  padding: 15px;
}

.hairstyle-intro strong {
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 650;
}

.hairstyle-intro p {
  font-size: 13.3px;
}

.hairstyle-intro p,
.hairstyle-requirements p,
.hairstyle-status,
.hairstyle-library-head span,
.hairstyle-disclaimer {
  color: #aaaaaa;
  font-size: 12px;
  line-height: 1.6;
}

.hairstyle-requirements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 0;
}

.hairstyle-requirements {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hairstyle-setup-card {
  margin: 12px 0 16px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.hairstyle-setup-card > .hairstyle-reference-block {
  margin-bottom: 14px;
}

.hairstyle-setup-card > .hairstyle-description-block {
  margin-bottom: 14px;
  padding: 11px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.hairstyle-requirements-grid label {
  display: block;
  min-height: 0;
  padding: 13px 13px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.hairstyle-requirements-grid input {
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
}

.hairstyle-requirements-grid select {
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin-top: 7px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
}

.hairstyle-gender-field {
  grid-column: auto;
}

.hairstyle-other-requirement {
  display: block;
  margin-top: 0;
  padding: 13px 13px 11px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--muted);
  font-size: 12px;
}

.hairstyle-other-requirement textarea {
  width: 100%;
  height: 34px;
  min-height: 34px;
  margin-top: 7px;
  padding: 0;
  resize: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: transparent;
  font: inherit;
  font-size: 16px;
  line-height: 34px;
}

.hairstyle-requirements p {
  margin: 10px 0 15px;
  text-align: center;
}

.hairstyle-upload {
  display: flex;
  min-height: 52px;
  margin-bottom: 12px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #999;
  border-radius: 10px;
  background: #f8f8f8;
  color: #111;
  font-size: 99%;
  font-weight: 650;
  cursor: pointer;
}

.hairstyle-workspace {
  margin: 18px 0 0;
  padding: 16px 12px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.hairstyle-workspace .hairstyle-upload {
  margin-bottom: 8px;
}

.hairstyle-workspace .primary {
  margin-top: 8px;
}

.hairstyle-selfie-preview {
  display: grid;
  grid-template-columns: 84px 1fr;
  gap: 12px;
  align-items: center;
}

.hairstyle-selfie-preview img {
  width: 84px;
  height: 104px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center top;
  background: var(--soft);
}

.hairstyle-selfie-preview > div {
  display: grid;
  gap: 10px;
}

.hairstyle-selfie-preview > div > span {
  color: var(--muted);
  text-align: center;
  font-size: 12.48px;
}

.hairstyle-delete-photo {
  width: fit-content;
  min-width: 96px;
  height: 36px;
  padding: 0 14px;
  font-size: 12.48px;
}

.hairstyle-delete-photo .action-button-icon {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  object-fit: contain;
}

.hairstyle-delete-photo .button-label {
  white-space: nowrap;
}

.hairstyle-status {
  min-height: 20px;
  margin: 8px 2px 12px;
  text-align: center;
}

.hairstyle-result-image,
.hairstyle-card-image {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 5;
  border-radius: 10px;
  background: var(--soft);
  object-fit: cover;
  object-position: center top;
}

.swipe-slide-panel {
  max-width: 100%;
  overflow: clip;
  contain: layout paint;
  will-change: transform, opacity;
  touch-action: pan-y;
  transform: translate3d(0, 0, 0);
}

.swipe-out-left {
  transform: translate3d(-4%, 0, 0);
  opacity: .2;
  transition: transform .13s ease, opacity .13s ease;
}

.swipe-out-right {
  transform: translate3d(4%, 0, 0);
  opacity: .2;
  transition: transform .13s ease, opacity .13s ease;
}

.swipe-in-left {
  transform: translate3d(-4%, 0, 0);
  opacity: .2;
}

.swipe-in-right {
  transform: translate3d(4%, 0, 0);
  opacity: .2;
}

.swipe-enter-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
  transition: transform .18s ease, opacity .18s ease;
}

.ai-watermark-frame {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

.hairstyle-result-image-frame,
.hairstyle-card-image-frame {
  width: 100%;
}

.product-card .ai-watermark-frame {
  width: 92px;
  height: 112px;
  border-radius: 7px;
  background: var(--soft);
}

.product-card-image {
  display: block;
  width: 92px;
  height: 112px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--soft);
}

.ai-image-watermark {
  position: absolute;
  right: 8px;
  bottom: 8px;
  z-index: 2;
  max-width: 88%;
  padding: 0;
  border-radius: 0;
  color: #fff;
  background: transparent;
  text-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  font-size: clamp(9px, 2.7vw, 13px);
  font-weight: 750;
  line-height: 1.1;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
}

.product-card .ai-image-watermark {
  max-width: 82px;
  right: 5px;
  bottom: 5px;
  padding: 0;
  font-size: 8px;
  white-space: normal;
}

.hairstyle-result h3,
.hairstyle-card h4 {
  margin: 18px 0 12px;
  text-align: center;
}

.hairstyle-analysis {
  display: grid;
  gap: 9px;
}

.hairstyle-analysis div {
  padding: 10px;
  border-radius: 8px;
  background: #f7f7f7;
}

.hairstyle-analysis b,
.hairstyle-analysis span {
  display: block;
}

.hairstyle-analysis b {
  margin-bottom: 4px;
  font-size: 13px;
}

.hairstyle-analysis span {
  color: #555;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hairstyle-result-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 8px;
}

.hairstyle-result-actions button {
  min-width: 0;
}

.hairstyle-library {
  margin-top: 16px;
}

.hairstyle-library-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 14px;
  padding: 4px;
  border-radius: 10px;
  background: #f1f1f1;
}

.hairstyle-library-tabs button {
  height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #666;
}

.hairstyle-library-tabs button.active {
  background: #111;
  color: #fff;
  font-weight: 650;
}

.hairstyle-library-head {
  display: flex;
  margin-bottom: 10px;
  align-items: center;
  justify-content: space-between;
}

.fitting-selection-tools {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}

.fitting-selection-tools button {
  min-height: 24px;
  padding: 0 9px;
  border: 1px solid #111;
  border-radius: 6px;
  color: #fff;
  background: #111;
  font-size: 12px;
  font-weight: 650;
}

.fitting-selection-tools button:disabled {
  border-color: #ddd;
  background: #eee;
  color: #aaa;
  cursor: not-allowed;
}

.hairstyle-list {
  display: grid;
  gap: 12px;
}

.hairstyle-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.hairstyle-card .hairstyle-analysis {
  margin-top: 8px;
}

.hairstyle-card-actions {
  margin-top: 10px;
}

.hairstyle-card-actions button {
  width: 100%;
}

.fitting-item-list,
.fitting-model-list {
  display: grid;
  gap: 8px;
}

.fitting-item-list,
.fitting-model-list {
  display: flex;
  gap: 8px;
  min-height: 130px;
  margin: 0;
  padding: 9px 34px 9px 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.fitting-item-list::-webkit-scrollbar,
.fitting-model-list::-webkit-scrollbar {
  height: 0;
}

.fitting-model-list {
  min-height: 130px;
}

.hairstyle-reference-list {
  min-height: 130px;
  padding: 0 30px 0 0;
  border: 0;
}

.hairstyle-reference-empty {
  display: grid;
  min-width: 100%;
  place-items: center;
  text-align: center;
}

.fitting-choice,
.fitting-model-choice {
  position: relative;
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  text-align: left;
}

.fitting-choice {
  flex: 0 0 38.25%;
  max-width: 126px;
  padding: 7px;
  scroll-snap-align: start;
}

.fitting-model-choice {
  flex: 0 0 38.25%;
  max-width: 126px;
  padding: 7px;
  scroll-snap-align: start;
}

.fitting-choice.active,
.fitting-model-choice.active {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.fitting-selection-badge {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: none;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 999px;
  color: #fff;
  background: #111;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
  line-height: 22px;
  text-align: center;
}

.fitting-choice.active .fitting-selection-badge,
.fitting-model-choice.active .fitting-selection-badge {
  display: inline-block;
}

.hairstyle-reference-upload-card {
  min-height: 120px;
  align-content: center;
  justify-items: center;
  text-align: center;
}

.hairstyle-reference-upload-card b {
  display: block;
  width: 100%;
  padding: 8px 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: #fff;
}

.hairstyle-reference-upload-icon {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  border-radius: 7px;
  background: var(--soft);
}

.hairstyle-reference-upload-icon::before {
  content: "+";
  color: #111;
  font-size: 24px;
  font-weight: 650;
  line-height: 1;
}

.hairstyle-reference-upload-icon:has(img)::before {
  content: "";
}

.hairstyle-reference-upload-icon img {
  width: 28px;
  height: 28px;
  aspect-ratio: auto;
  background: transparent;
  object-fit: contain;
}

.hairstyle-reference-uploaded {
  gap: 7px;
}

.hairstyle-reference-delete {
  margin-top: 0;
}

.hairstyle-selfies-block {
  gap: 8px;
  margin-top: 10px;
}

.hairstyle-selfies-block .fitting-head strong,
.hairstyle-selfies-block .fitting-head strong span:not(.fitting-head-icon) {
  color: #111;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.3;
}

.hairstyle-selfies-block .fitting-head > span {
  color: #aaaaaa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
}

.hairstyle-selfies-block .fitting-head .fitting-head-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid #111;
  border-radius: 50%;
}

.hairstyle-selfies-block .fitting-head .fitting-head-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(-45deg);
}

.hairstyle-selfies-block .fitting-head .fitting-head-icon.has-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border: 0;
  border-radius: 0;
}

.hairstyle-selfies-block .fitting-head .fitting-head-icon.has-icon::after {
  content: none;
}

.hairstyle-selfie-list {
  min-height: 0;
  padding: 8px;
}

.hairstyle-selfie-choice {
  flex: 0 0 38.25%;
  max-width: 126px;
  min-width: 0;
  padding: 7px;
}

.hairstyle-selfie-choice .checkmark {
  position: absolute;
  top: 6px;
  left: 6px;
  z-index: 2;
  display: none;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  background: #111;
  font-size: 14px;
  font-weight: 750;
  line-height: 22px;
  text-align: center;
}

.hairstyle-selfie-choice.active .checkmark {
  display: inline-block;
}

.fitting-model-choice.hairstyle-selfie-choice .checkmark {
  color: #fff;
  font-size: 14px;
  line-height: 22px;
}

.hairstyle-selfie-choice.uploading {
  align-content: center;
  justify-items: center;
}

.fitting-choice img,
.fitting-model-choice img {
  width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 7px;
  background: var(--soft);
  object-fit: cover;
  object-position: center top;
}

.fitting-choice img {
  aspect-ratio: 4 / 5;
}

.fitting-choice b,
.fitting-model-choice b {
  color: #111111;
  font-size: 12px;
  line-height: 1.35;
}

.fitting-model-choice b {
  text-align: center;
}

.fitting-upload-placeholder {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 5;
  place-items: center;
  border-radius: 7px;
  color: #666;
  background: var(--soft);
  font-size: 12px;
  font-weight: 650;
}

.fitting-selfie-delete {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: #111;
  background: #fff;
  font-size: 11px;
  font-weight: 650;
  text-align: center;
}

.fitting-selfie-delete .action-button-icon {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  object-fit: contain;
}

.fitting-selfie-delete .button-label {
  line-height: 1;
  white-space: nowrap;
}

.fitting-choice b {
  font-size: 10.5px;
  text-align: center;
}

.fitting-choice span,
.fitting-model-choice span,
.fitting-card-items {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.fitting-choice span {
  font-size: 10.5px;
  text-align: center;
}

.fitting-card-items {
  margin: 4px 0 16px;
  text-align: center;
}

.fitting-result-info {
  margin: 22px 0 22px;
  padding: 14px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
  text-align: center;
}

.fitting-result-info h3,
.fitting-result-info h4 {
  margin: 0 0 8px;
}

.fitting-result-info .fitting-card-items {
  margin: 0 0 8px;
}

.fitting-result-info .hairstyle-disclaimer {
  margin: 0;
  padding-top: 10px;
  color: #aaaaaa;
}

.fitting-generating-card {
  margin: 18px 0 18px;
  padding: 22px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-align: center;
}

.fitting-generating-card strong {
  display: block;
  margin: 10px 0 8px;
  font-size: 17px;
}

.fitting-generating-card p {
  margin: 0 auto 8px;
  max-width: 280px;
  color: #666;
  font-size: 12px;
  line-height: 1.6;
}

.fitting-generating-card small {
  color: #999;
  font-size: 12px;
}

.fitting-generating-pulse {
  width: 36px;
  height: 36px;
  margin: 0 auto;
  border: 3px solid #eeeeee;
  border-top-color: #111111;
  border-radius: 50%;
  animation: fittingSpin 0.9s linear infinite;
}

.generating-refresh-visual {
  display: grid;
  width: 112px;
  height: 28px;
  margin: 0 auto;
  place-items: center;
  overflow: hidden;
}

.generating-refresh-visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes fittingSpin {
  to {
    transform: rotate(360deg);
  }
}

.fitting-workspace {
  margin: 12px 0 14px;
  padding: 13px 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.fitting-block {
  margin-bottom: 18px;
}

.fitting-accessory-tip,
.hairstyle-reference-tip {
  display: none;
  margin: 8px 0 15px;
  color: #aaa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  text-align: center;
}

.fitting-block:nth-of-type(2),
.hairstyle-reference-block {
  padding: 11px 10px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
}

.hairstyle-description-tip {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 22px;
  margin: 0 0 12px;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.hairstyle-description-tip b {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
  color: #111;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.3;
}

.hairstyle-description-tip span {
  flex: 1 1 auto;
  color: #aaa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
}

.hairstyle-description-tip .fitting-head-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid #111;
  border-radius: 50%;
}

.hairstyle-description-tip .fitting-head-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(-45deg);
}

.hairstyle-description-tip .fitting-head-icon.has-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border: 0;
  border-radius: 0;
}

.hairstyle-description-tip .fitting-head-icon.has-icon::after {
  content: none;
}

.hairstyle-description-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid #111;
  border-radius: 50%;
}

.hairstyle-description-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(-45deg);
}

.fitting-head {
  margin-bottom: 14px;
}

.fitting-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fitting-block .fitting-head strong,
.fitting-block .fitting-head strong span:not(.fitting-head-icon) {
  color: #111;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.3;
}

.hairstyle-reference-block .fitting-head strong,
.hairstyle-reference-block .fitting-head strong span:not(.fitting-head-icon),
.hairstyle-description-tip b,
.hairstyle-description-tip b span:not(.fitting-head-icon) {
  color: #111;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.3;
}

.hairstyle-reference-block .fitting-head > span {
  color: #aaaaaa;
  font-size: 12px;
  font-weight: 500;
}

.fitting-head-icon {
  display: none;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.fitting-head-icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fitting-head-icon.has-icon {
  display: inline-flex;
}

.hairstyle-result .hairstyle-analysis,
.hairstyle-card .hairstyle-analysis {
  margin-top: 10px;
}

.hairstyle-disclaimer {
  margin: 14px 0 4px;
  text-align: center;
}

@media (max-width: 340px) {
  .hairstyle-requirements-grid,
  .hairstyle-result-actions,
  .fitting-choice {
    flex-basis: 58%;
  }

  .fitting-model-choice {
    flex-basis: 42%;
  }
}

.intro,
.result {
  padding: 17px;
  margin-bottom: 12px;
}

.intro strong,
.result strong {
  display: block;
  margin-bottom: 8px;
  font-size: 17px;
  font-weight: 650;
}

.intro p,
.reason {
  color: var(--muted);
  font-size: 13.3px;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

label {
  display: block;
  min-width: 0;
  padding: 13px 13px 11px;
  color: var(--muted);
  font-size: 12px;
}

label.wide {
  grid-column: 1 / 3;
}

input,
select,
textarea {
  width: 100%;
  min-height: 34px;
  margin-top: 7px;
  border: 0;
  outline: 0;
  color: var(--ink);
  background: transparent;
  font: inherit;
  font-size: 16px;
  touch-action: manipulation;
}

input::placeholder,
textarea::placeholder {
  color: #aaaaaa;
}

.primary,
.secondary,
.photo-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  margin: 12px 0;
  text-align: center;
  font-weight: 650;
}

.primary {
  color: #fff;
  background: #111111;
  box-shadow: none;
}

.secondary {
  color: var(--ink);
  border: 1px solid var(--line);
  background: #ffffff;
}

.photo-btn {
  color: #fff;
  background: #111111;
}

.edit-preview {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.edit-preview img {
  width: 64px;
  height: 76px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--soft);
}

.ai-stylist-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  height: auto;
  min-height: 0;
  padding: 12px 12px 74px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.ai-stylist-messages {
  display: grid;
  align-content: start;
  gap: 9px;
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.ai-stylist-messages::-webkit-scrollbar {
  display: none;
}

.ai-message {
  max-width: 86%;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.55;
}

.ai-message.assistant {
  justify-self: start;
  color: #111;
  background: #f5f5f5;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .02);
}

.ai-message.typing::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -2px;
  background: currentColor;
  animation: aiTypingCaret .72s steps(1) infinite;
}

@keyframes aiTypingCaret {
  50% {
    opacity: 0;
  }
}

.ai-message.user {
  justify-self: end;
  min-width: 180px;
  max-width: 86%;
  color: #fff;
  border: 1px solid #111;
  background: #111;
  text-align: center;
}

.ai-stylist-upload-preview {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 9px;
}

.ai-stylist-upload-preview img {
  width: 72px;
  height: 86px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--soft);
}

.ai-stylist-upload-preview button {
  height: 36px;
  color: #111;
  border: 1px solid var(--line);
  background: #fff;
}

.ai-stylist-input-row button,
.ai-stylist-upload {
  height: 42px;
  color: #fff;
  background: #111;
  font-weight: 650;
}

.ai-stylist-composer {
  display: grid;
  gap: 11px;
  flex: 0 0 auto;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.ai-stylist-presets {
  display: flex;
  gap: 7px;
  padding: 4px 0 5px;
  overflow-x: auto;
  scrollbar-width: none;
}

.ai-stylist-presets::-webkit-scrollbar {
  display: none;
}

.ai-stylist-presets button {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 11px;
  color: #111;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 650;
}

.ai-stylist-presets .action-button-icon {
  width: 17px;
  height: 17px;
}

.ai-stylist-input-row {
  display: grid;
  grid-template-columns: 42px 1fr 54px;
  gap: 7px;
  align-items: end;
  margin-top: 2px;
}

.ai-stylist-upload {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin: 0;
  padding: 0;
  color: #fff;
  border: 0;
  border-radius: 7px;
  font-size: 0;
}

.ai-stylist-upload::before {
  content: "";
  width: 19px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.ai-stylist-upload::after {
  content: "";
  position: absolute;
  top: 12px;
  left: 18px;
  width: 7px;
  height: 7px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.ai-stylist-upload.has-action-icon::before,
.ai-stylist-upload.has-action-icon::after {
  display: none;
}

.ai-stylist-upload .action-button-icon {
  width: 22px;
  height: 22px;
  margin: 0;
}

.ai-stylist-upload .action-button-icon + .button-label {
  font-size: 0;
}

.ai-stylist-input-row textarea {
  min-height: 42px;
  max-height: 90px;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  resize: none;
}

.ai-stylist-inline-loading,
.ai-stylist-inline-outfit {
  justify-self: start;
  width: 86%;
  max-width: 86%;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #ffffff;
}

.ai-stylist-inline-loading {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}

.ai-stylist-inline-outfit .today-result-title {
  margin-bottom: 8px;
  font-size: 14px;
}

.ai-stylist-inline-outfit .outfit-products {
  gap: 8px;
  margin: 6px 0 8px;
}

.ai-stylist-inline-outfit .product-card {
  grid-template-columns: 70px 1fr;
  gap: 9px;
  padding: 8px;
}

.ai-stylist-inline-outfit .product-card img {
  width: 70px;
  height: 86px;
}

.ai-stylist-inline-outfit .product-card small {
  font-size: 10px;
}

.ai-stylist-inline-outfit .product-card b {
  margin-top: 2px;
  font-size: 13px;
}

.ai-stylist-inline-outfit .product-card em {
  margin-top: 2px;
  font-size: 11px;
}

.ai-stylist-inline-outfit .product-card p {
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.35;
}

.ai-stylist-inline-outfit .combined-analysis {
  margin: 8px 0;
  font-size: 12px;
  line-height: 1.55;
}

.ai-stylist-inline-outfit .outfit-fitting-open {
  margin: 8px 0 6px;
  font-size: 15px;
}

.ai-stylist-inline-outfit .today-extra-actions.outfit-extra {
  gap: 8px;
}

.ai-stylist-inline-outfit .today-extra-actions.outfit-extra .primary {
  height: 40px;
  font-size: 12px;
}

.ai-stylist-week-day {
  display: grid;
  gap: 7px;
  margin-top: 8px;
}

.ai-stylist-week-day > b {
  font-size: 13px;
  text-align: center;
}

.ai-stylist-inline-fitting {
  display: grid;
  gap: 10px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.ai-stylist-inline-fitting .hairstyle-result-image {
  max-height: 440px;
}

.edit-preview strong,
.edit-preview span {
  display: block;
}

.edit-preview strong {
  font-size: 14px;
}

.edit-preview span {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

.closet-list {
  display: grid;
  gap: 9px;
}

.closet-categories {
  display: flex;
  gap: 8px;
  margin: 8px 0 10px;
  padding-bottom: 2px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.closet-categories::-webkit-scrollbar {
  display: none;
}

.closet-categories button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  height: 34px;
  padding: 0 14px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 13px;
}

.closet-categories em {
  font-style: normal;
  color: var(--muted);
  font-size: 12px;
}

.closet-categories button.active {
  color: #ffffff;
  border-color: #111111;
  background: #111111;
}

.closet-categories button.active em {
  color: #ffffff;
}

.fitting-categories {
  margin-top: -2px;
  margin-bottom: 10px;
}

.fitting-categories button {
  height: 28px;
  padding: 0 12px;
  border-radius: 7px;
  font-size: 12px;
}

.empty-tip {
  padding: 22px 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  text-align: center;
  font-size: 13px;
}

.cloth-card {
  display: grid;
  grid-template-columns: 78px 1fr;
  gap: 12px;
  align-items: center;
  padding: 11px;
  cursor: default;
}

.thumb {
  width: 78px;
  height: 106px;
  border-radius: 7px;
  background:
    linear-gradient(135deg, #f6f6f6, #e9e9e9);
  object-fit: cover;
  object-position: center top;
}

.cloth-card b,
.cloth-card span,
.result span {
  display: block;
}

.cloth-card b {
  margin-bottom: 4px;
  font-weight: 650;
}

.cloth-card span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}

.cloth-actions {
  display: flex;
  gap: 8px;
  margin-top: 9px;
}

.cloth-actions button {
  height: 28px;
  padding: 0 12px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: #ffffff;
  font-size: 12px;
}

.cloth-actions button:last-child {
  color: #111111;
  background: #f5f5f5;
}

.result {
  display: grid;
  gap: 12px;
  font-size: 14px;
  line-height: 1.7;
}

#outfit.result {
  margin: 23px 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.today-day-card {
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.today-outfit-inner-card {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 20px 0 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.today-outfit-inner-card .outfit-products {
  gap: 10px;
  margin: 14px 0 8px;
}

.today-outfit-inner-card .today-result-title {
  font-size: 15px;
  line-height: 1.35;
}

.today-outfit-inner-card .today-weather-line {
  font-size: 11.5px;
  line-height: 1.3;
}

.today-outfit-inner-card .product-card {
  grid-template-columns: 84px 1fr;
  gap: 10px;
  padding: 8px;
}

.today-outfit-inner-card .product-card img {
  width: 84px;
  height: 96px;
}

.today-outfit-inner-card .product-card small {
  font-size: 10.5px;
}

.today-outfit-inner-card .product-card b {
  margin-top: 3px;
  font-size: 14px;
}

.today-outfit-inner-card .product-card em {
  margin-top: 3px;
  font-size: 11.5px;
}

.today-outfit-inner-card .product-card p {
  margin-top: 5px;
  font-size: 12.2px;
  line-height: 1.4;
}

.outfit-products {
  display: grid;
  gap: 12px;
  margin: 8px 0 12px;
}

.product-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.product-card img {
  width: 92px;
  height: 112px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--soft);
}

.product-card small,
.product-card b,
.product-card em,
.product-card p {
  display: block;
}

.product-card small {
  color: var(--champagne);
  font-size: 11px;
  font-style: normal;
}

.product-card b {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 650;
}

.product-card em {
  margin-top: 4px;
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

.product-card p {
  margin-top: 7px;
  color: #4d4943;
  font-size: 13px;
  line-height: 1.45;
}

#aiAnalysisText {
  display: block;
  margin: 10px 0 8px;
  line-height: 1.75;
}

.analysis-body {
  padding-top: 4px;
}

.outfit-reason {
  display: block;
  margin: 8px 0 10px;
  line-height: 1.7;
}

.combined-analysis {
  display: block;
  margin: 10px 0;
  color: #222;
  line-height: 1.75;
  white-space: pre-line;
}

.cloth-usage-stat {
  margin-top: 4px;
  color: var(--muted) !important;
  font-weight: 500;
}

.outfit-extra {
  display: block;
  margin-top: 4px;
  line-height: 1.7;
}

.outfit-action-box {
  display: grid;
  gap: 4px;
  margin-top: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.outfit-action-box .outfit-fitting-open {
  margin-bottom: 0;
}

.today-extra-actions.outfit-extra {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 0;
  line-height: normal;
}

.today-extra-actions.outfit-extra .primary {
  min-width: 0;
  height: 42px;
  padding: 0 8px;
  font-size: 14px;
}

.editor-upload-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 16px;
}

.editor-upload-actions .photo-btn {
  min-width: 0;
  margin: 0;
  padding: 0 8px;
  text-align: center;
}

.action-button-icon {
  width: 20px;
  height: 20px;
  margin-right: 0;
  object-fit: contain;
  flex: 0 0 auto;
}

.primary,
.secondary,
.photo-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.ai-disclaimer {
  display: block;
  margin-top: 12px;
  color: #aaaaaa;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

.recommend-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 42px;
  margin: 0;
  border: 0;
  border-radius: 7px;
  color: #ffffff;
  background: #111111;
  font-weight: 650;
  text-align: center;
}

.outfit-fitting-open {
  min-height: 52px;
  margin: 8px 0 6px;
  border: 1px dashed #999;
  color: #111;
  background: #f8f8f8;
  font-size: 15.4px;
  font-weight: 650;
  box-shadow: none;
}

.outfit-diagnosis-fitting-open {
  min-height: 52px;
  margin: 4px 0 8px;
  border: 1px dashed #999;
  border-radius: 7px;
  color: #111;
  background: #fff;
  font-size: 15.4px;
  font-weight: 650;
  box-shadow: none;
}

.outfit-diagnosis-fitting-open .action-button-icon {
  width: 18px;
  height: 18px;
}

.outfit-diagnosis-products + .outfit-diagnosis-disclaimer {
  margin-top: 8px;
  margin-bottom: 6px;
}

.bottom-sheet-mask {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 12px env(safe-area-inset-bottom);
  background: rgba(0, 0, 0, .38);
}

.bottom-sheet-mask[hidden] {
  display: none;
}

.bottom-sheet-panel {
  width: min(100%, 430px);
  max-height: 88vh;
  padding: 14px 12px 16px;
  overflow: auto;
  border-radius: 16px 16px 0 0;
  background: #fff;
  box-shadow: 0 -12px 34px rgba(0, 0, 0, .18);
  scrollbar-width: none;
}

.bottom-sheet-panel::-webkit-scrollbar {
  display: none;
}

.bottom-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.bottom-sheet-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
  font-weight: 700;
}

.bottom-sheet-head button {
  min-height: 30px;
  padding: 0 12px;
  color: #fff;
  background: #111;
  font-weight: 650;
}

.outfit-fitting-summary {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #fff;
}

.outfit-fitting-summary strong,
.outfit-fitting-summary span {
  display: block;
}

.outfit-fitting-summary strong {
  margin-bottom: 8px;
  font-size: 15px;
}

.outfit-fitting-summary span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.55;
}

.outfit-fitting-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 10px;
}

.outfit-fitting-actions button {
  min-width: 0;
}

.outfit-fitting-regenerate {
  grid-column: 1 / -1;
}

body.sheet-open {
  overflow: hidden;
}

.profile-account {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 14px;
  align-items: center;
  width: 100%;
  min-height: 120px;
  margin: 0 0 12px;
  padding: 22px 18px;
  border: 0;
  border-radius: 0;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
}

.profile-account img {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #f0f0f4;
  object-fit: cover;
}

.profile-account strong,
.profile-account span {
  display: block;
}

.profile-account strong {
  font-size: 26px;
  font-weight: 500;
}

.profile-account span {
  margin-top: 6px;
  color: var(--muted);
  font-size: 13px;
}

.profile-stats-card,
.delete-account-card {
  display: grid;
  gap: 13px;
  margin: 12px 0;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.profile-stats-card > strong,
.delete-account-card > strong {
  font-size: 17px;
  font-weight: 650;
}

.profile-stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.profile-stats-grid span {
  display: grid;
  gap: 7px;
  min-height: 72px;
  padding: 12px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
}

.profile-stats-grid b {
  color: var(--ink);
  font-size: 22px;
  font-weight: 650;
}

.delete-account-card p {
  color: #555555;
  font-size: 14px;
  line-height: 1.7;
}

.delete-account-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.privacy-card {
  display: grid;
  gap: 10px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.privacy-card > strong {
  text-align: center;
  font-size: 18px;
  font-weight: 650;
}

.privacy-card > span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

#privacyContent,
#agreementContent,
#customPageContent {
  color: #333333;
  font-size: 14px;
  line-height: 1.85;
  white-space: pre-wrap;
}

#privacyContent,
#agreementContent,
#customPageContent {
  display: block;
}

#customPageContent img {
  display: block;
  width: 100%;
  height: auto;
  margin: 10px 0;
  border-radius: 8px;
  object-fit: contain;
}

.profile-list {
  margin: 0 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #ffffff;
}

.profile-list button {
  display: grid;
  grid-template-columns: 27px 1fr 14px;
  gap: 10px;
  align-items: center;
  width: 100%;
  min-height: 61px;
  padding: 10px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  color: var(--ink);
  background: #ffffff;
  text-align: left;
}

.profile-list button:last-child {
  border-bottom: 0;
}

.profile-list b {
  min-width: 0;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  overflow-wrap: anywhere;
  white-space: normal;
}

.profile-list i {
  justify-self: end;
  width: 8px;
  height: 8px;
  border-top: 2px solid #b7bbc3;
  border-right: 2px solid #b7bbc3;
  transform: rotate(45deg);
}

.profile-menu-icon {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  color: #111;
}

.profile-menu-img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}

.profile-menu-icon::before,
.profile-menu-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  border-color: currentColor;
}

.profile-menu-plus::before,
.profile-menu-card::before {
  left: 2px;
  top: 3px;
  width: 18px;
  height: 16px;
  border: 2px solid currentColor;
}

.profile-menu-plus::after {
  left: 7px;
  top: 8px;
  width: 8px;
  height: 8px;
  border-left: 2px solid currentColor;
  border-top: 2px solid currentColor;
  transform: rotate(45deg);
}

.profile-menu-yen::before {
  left: 2px;
  top: 2px;
  width: 18px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.profile-menu-yen::after {
  left: 7px;
  top: 6px;
  width: 8px;
  height: 9px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
}

.profile-menu-pin::before {
  left: 5px;
  top: 2px;
  width: 13px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 10px 10px 10px 0;
  transform: rotate(-45deg);
}

.profile-menu-bell::before {
  left: 4px;
  top: 4px;
  width: 15px;
  height: 15px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 10px 10px 4px 4px;
}

.profile-menu-wechat::before {
  left: 2px;
  top: 6px;
  width: 12px;
  height: 10px;
  border: 2px solid currentColor;
  border-radius: 50%;
}

.profile-menu-wechat::after {
  left: 10px;
  top: 7px;
  width: 11px;
  height: 9px;
  border: 2px solid currentColor;
  border-radius: 50%;
  background: #fff;
}

.profile-menu-shield::before {
  left: 4px;
  top: 2px;
  width: 15px;
  height: 18px;
  border: 2px solid currentColor;
  border-radius: 5px 5px 8px 8px;
}

.profile-menu-logout::before {
  left: 3px;
  top: 4px;
  width: 12px;
  height: 15px;
  border: 2px solid currentColor;
  border-right: 0;
}

.profile-menu-logout::after {
  left: 9px;
  top: 9px;
  width: 10px;
  border-top: 2px solid currentColor;
}

.profile-menu-calendar::before {
  left: 3px;
  top: 4px;
  width: 16px;
  height: 15px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.profile-menu-calendar::after {
  left: 6px;
  top: 8px;
  width: 10px;
  border-top: 2px solid currentColor;
  box-shadow: 0 4px 0 currentColor;
}

.profile-menu-bag::before {
  left: 3px;
  top: 7px;
  width: 16px;
  height: 13px;
  border: 2px solid currentColor;
  border-radius: 3px;
}

.profile-menu-bag::after {
  left: 7px;
  top: 3px;
  width: 8px;
  height: 7px;
  border: 2px solid currentColor;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
}

.profile-form {
  margin-top: 12px;
}

.phone-bind-card {
  display: grid;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.phone-bind-card strong,
.phone-bind-card span {
  display: block;
}

.phone-bind-card strong {
  font-size: 16px;
}

.phone-bind-card span,
.phone-bind-card p {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}

.profile-code-row {
  display: grid;
  grid-template-columns: 1fr 132px;
  gap: 8px;
  align-items: end;
}

.profile-code-row button {
  height: 44px;
  color: #ffffff;
  background: #111111;
  font-size: 13px;
}

.subpage-head {
  display: grid;
  grid-template-columns: 64px 1fr 64px;
  align-items: center;
  min-height: 52px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
  background: #fff;
}

.subpage-head button {
  height: 36px;
  color: var(--ink);
  background: transparent;
  font-size: 14px;
}

.subpage-head strong {
  text-align: center;
  font-size: 18px;
  font-weight: 650;
}

.recent-outfits-card {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.recent-outfits-card > strong {
  display: block;
  margin-bottom: 14px;
}

.recent-outfit-list {
  display: grid;
  gap: 14px;
}

.recent-outfit-card {
  margin-top: 0;
}

.recent-time {
  display: block;
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}

.recent-outfit-note {
  margin: 16px 0 10px;
  color: #aaaaaa;
  font-size: 13px;
  line-height: 1.6;
  text-align: center;
}

.batch-review {
  display: grid;
  gap: 12px;
  margin: 0 0 16px;
}

.batch-review > strong,
.batch-review > span {
  display: block;
}

.batch-review > strong {
  font-size: 15px;
  font-weight: 650;
}

.batch-review > span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

.batch-item {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
}

.batch-item-head {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.batch-item-head img {
  width: 64px;
  height: 76px;
  border-radius: 7px;
  object-fit: cover;
  background: var(--soft);
}

.batch-item-head .ghost-btn {
  justify-self: end;
  height: 32px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  color: var(--ink);
  background: #ffffff;
}

.back-to-top {
  position: fixed;
  right: max(26px, calc((100vw - 430px) / 2 + 24px));
  bottom: 148px;
  z-index: 80;
  display: inline-flex;
  width: 55px;
  height: 55px;
  padding: 0;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  color: #101010;
  background: transparent;
  box-shadow: none;
}

.back-to-top[hidden] {
  display: none;
}

.back-to-top img,
.back-to-top-default {
  width: 32px;
  height: 32px;
  object-fit: contain;
  font-size: 34px;
  line-height: 32px;
}

.back-to-top .button-label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 520px) {
  html {
    -webkit-text-size-adjust: 100%;
  }

  body {
    overflow-x: hidden;
  }

  input,
  select,
  textarea {
    font-size: 16px !important;
  }

  .code-row,
  .profile-code-row {
    grid-template-columns: minmax(0, 1fr) minmax(118px, 38%);
  }

  .code-row > *,
  .profile-code-row > * {
    min-width: 0;
  }

  .back-to-top {
    right: 24px;
    bottom: 138px;
    width: 49px;
    height: 49px;
  }
}

.today-control-card .today-actions .primary {
  height: 40px;
  min-height: 40px;
  margin: 0;
  font-size: 14px;
}

.today-control-card .today-actions {
  gap: 11px 8px;
  margin-top: 15px;
  margin-bottom: 13px;
}

.today-control-card .today-actions .generate-today-wide {
  height: 56px;
  min-height: 56px;
  border: 1px dashed #999;
  color: #111;
  background: #f8f8f8;
  font-size: 15.4px;
  font-weight: 650;
  box-shadow: none;
}

.week-day-card {
  margin: 0 0 18px;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.week-day-card .today-result-title,
.week-day-card > strong {
  margin-bottom: 0;
}

.week-day-card .today-weather-line {
  margin: 8px 0 16px;
}

.today-day-card {
  margin: 0 0 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.today-day-card .today-outfit-inner-card {
  margin: 0;
  padding: 20px 0 6px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.today-day-card .today-outfit-inner-card .today-weather-line {
  margin: 8px 0 14px;
}

.today-day-card .today-outfit-inner-card .outfit-products {
  margin: 12px 0 8px;
}

.fitting-result-info {
  margin: 26px 0 26px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.fitting-result-info .fitting-card-items {
  margin-bottom: 6px;
}

.fitting-result-info .hairstyle-disclaimer {
  padding-top: 7px;
}

.outfit-diagnosis-card {
  display: grid;
  gap: 12px;
}

.outfit-diagnosis-quota {
  margin-bottom: 2px;
}

.outfit-diagnosis-photo {
  display: grid;
  grid-template-columns: 112px 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.outfit-diagnosis-photo img,
.outfit-diagnosis-record-image {
  width: 112px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 6px;
  background: #f2f2f2;
}

.outfit-diagnosis-photo button {
  height: 42px;
  border: 1px solid var(--line);
  background: #fff;
  color: #111;
  font-weight: 650;
}

.outfit-diagnosis-result .hairstyle-analysis {
  margin-top: 10px;
}

.home-quick-menu {
  align-items: center;
  margin: 5px 0 6px;
  padding: 6px 0 7px;
}

.home-quick-item {
  min-height: 78px;
  padding: 4px 2px;
  font-size: 11.22px;
  justify-content: center;
  gap: 6px;
}

.home-quick-icon-wrap {
  width: 83px;
  height: 83px;
  border-radius: 0;
  background: transparent;
  color: #111;
}

.home-quick-img,
.home-quick-icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
}

.home-quick-icon {
  color: #111;
  font-size: 45px;
}

.home-quick-icon::before {
  font-size: 45px;
  line-height: 1;
}

.home-quick-label {
  line-height: 1.2;
}

.today-day-card,
.week-day-card {
  margin: 0 0 18px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.today-day-card .today-outfit-inner-card,
.week-day-card .today-outfit-inner-card {
  margin: 0;
  padding: 20px 0 6px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.today-day-card .today-result-title,
.week-day-card .today-result-title,
.week-day-card > strong {
  display: block;
  margin: 0;
  text-align: center;
  color: #111;
  font-size: 15px;
  font-weight: 800;
  line-height: 1.35;
}

.today-day-card .today-weather-line,
.week-day-card .today-weather-line {
  margin: 8px 0 16px;
  text-align: center;
  color: #aaa;
  font-size: 11.5px;
  line-height: 1.3;
}

.outfit-diagnosis-fields {
  margin: 0;
}

.outfit-diagnosis-upload {
  margin: 0;
}

.outfit-diagnosis-upload[aria-busy="true"] {
  opacity: .72;
  pointer-events: none;
}

.outfit-diagnosis-upload[aria-busy="true"] .button-label::after {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  border: 2px solid rgba(17, 17, 17, .2);
  border-top-color: #111;
  border-radius: 50%;
  vertical-align: -2px;
  animation: spin .8s linear infinite;
}

.outfit-diagnosis-photo-section {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.outfit-diagnosis-photo-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  align-items: center;
}

.outfit-diagnosis-photo-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #111;
  font-size: 16px;
  font-weight: 750;
  line-height: 1.3;
}

.outfit-diagnosis-photo-head > span {
  color: #aaa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.35;
  text-align: right;
}

.outfit-diagnosis-photo-title .fitting-head-icon {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  border: 2px solid #111;
  border-radius: 50%;
}

.outfit-diagnosis-photo-title .fitting-head-icon::after {
  content: "";
  position: absolute;
  left: 3px;
  top: 2px;
  width: 7px;
  height: 4px;
  border-left: 2px solid #111;
  border-bottom: 2px solid #111;
  transform: rotate(-45deg);
}

.outfit-diagnosis-photo-title .fitting-head-icon.has-icon {
  width: 18px;
  height: 18px;
  flex-basis: 18px;
  border: 0;
  border-radius: 0;
}

.outfit-diagnosis-photo-title .fitting-head-icon.has-icon::after {
  content: none;
}

.outfit-diagnosis-photo-section .outfit-diagnosis-photo-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
}

.outfit-diagnosis-photo-section .outfit-diagnosis-photo-title strong,
.outfit-diagnosis-photo-section .outfit-diagnosis-photo-title strong span:not(.fitting-head-icon) {
  color: #111 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1.25;
}

.outfit-diagnosis-photo-section .outfit-diagnosis-photo-title > span {
  color: #aaa !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  line-height: 1.35;
  text-align: right;
}

.outfit-diagnosis-photo-section .outfit-diagnosis-photo-title .fitting-head-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.outfit-diagnosis-photo-section .outfit-diagnosis-photo-title .fitting-head-icon.has-icon {
  width: 20px;
  height: 20px;
  flex-basis: 20px;
}

.outfit-diagnosis-photo {
  padding: 0;
  border: 0;
  background: transparent;
}

.outfit-diagnosis-photo-list {
  display: flex;
  gap: 8px;
  min-height: 186px;
  overflow-x: auto;
  padding: 0 0 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  scrollbar-width: none;
}

.outfit-diagnosis-photo-list::-webkit-scrollbar {
  display: none;
}

.outfit-diagnosis-photo-card {
  flex: 0 0 101px;
  display: grid;
  gap: 6px;
  padding: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.outfit-diagnosis-photo-card.selected {
  border-color: #111;
  box-shadow: inset 0 0 0 1px #111;
}

.outfit-diagnosis-photo-select {
  position: relative;
  display: grid;
  gap: 6px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: #111;
  text-align: center;
}

.outfit-diagnosis-photo-select img {
  width: 86px;
  height: 115px;
  border-radius: 6px;
  object-fit: cover;
  background: #f2f2f2;
}

.outfit-diagnosis-photo-select strong {
  overflow: hidden;
  font-size: 12px;
  font-weight: 750;
  line-height: 1.2;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.outfit-diagnosis-photo-select .photo-check {
  position: absolute;
  top: 4px;
  left: 4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #111;
  color: #fff;
  font-size: 13px;
  opacity: 0;
}

.outfit-diagnosis-photo-card.selected .photo-check {
  opacity: 1;
}

.outfit-diagnosis-photo-delete {
  width: 100%;
  min-height: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #111;
  font-size: 12px;
  font-weight: 650;
}

.outfit-diagnosis-result h3 {
  margin: 0 0 14px;
  text-align: center;
}

.outfit-diagnosis-analysis {
  display: grid;
  gap: 9px;
  margin-top: 14px;
}

.outfit-diagnosis-analysis > div {
  padding: 10px;
  border-radius: 8px;
  background: #f7f7f7;
}

.outfit-diagnosis-analysis b {
  display: block;
  margin-bottom: 4px;
  color: #111;
  font-size: 13px;
}

.outfit-diagnosis-analysis span {
  display: block;
  color: #555;
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.outfit-diagnosis-products {
  margin: 12px 0;
}

.outfit-diagnosis-disclaimer {
  margin-top: 10px;
}

.outfit-diagnosis-saved-card .outfit-diagnosis-analysis {
  margin-top: 12px;
}

.outfit-diagnosis-saved-card .outfit-diagnosis-products {
  margin-top: 12px;
}

.outfit-diagnosis-delete-record {
  width: 100%;
  min-height: 44px;
  margin-top: 14px;
  border: 0;
  border-radius: 6px;
  background: #111;
  color: #fff;
  font-size: 15px;
  font-weight: 750;
}

.pull-refresh-spinner {
  width: 66px;
  height: 18px;
  margin: 0 auto 10px;
  position: relative;
}

.pull-refresh-spinner::after {
  content: "";
  display: block;
  width: 18px;
  height: 18px;
  margin: 0 auto;
  border: 3px solid #eeeeee;
  border-top-color: #111111;
  border-radius: 50%;
  animation: spin 0.75s linear infinite;
}