/* ===== Auth Views ===== */

/* El view-container en páginas auth ocupa toda la pantalla */
#view-container:has(.auth-view) {
  min-height: 100dvh;
  display: flex;
}

.auth-view {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 100dvh;
  padding: 48px 24px 32px;
  background: var(--bg-card);
}

/* .auth-card — en mobile no tiene estilo propio, es solo el contenedor */
.auth-card { width: 100%; }

.auth-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 36px; }
.auth-logo .brand-logo { width: 40px; height: 40px; }
.auth-logo span { font-size: 22px; font-weight: 800; color: var(--text-primary); }

.auth-title    { font-size: 26px; font-weight: 800; margin-bottom: 6px; }
.auth-subtitle { font-size: 15px; color: var(--text-secondary); margin-bottom: 32px; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }

.auth-input-wrap label {
  display: block; font-size: 12px; font-weight: 600;
  color: var(--text-secondary); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: 0.05em;
}
.auth-input-wrap input {
  width: 100%; background: var(--bg-input);
  border-radius: var(--r-md); padding: 13px 14px;
  font-size: 15px; border: 1.5px solid transparent;
  transition: border-color var(--duration);
  display: block;
}
.auth-input-wrap input:focus { border-color: var(--color-primary); outline: none; }
.auth-input-wrap input::placeholder { color: var(--text-muted); }
.auth-field-hint { display:block; margin-top:5px; color:var(--text-muted); font-size:10px; }
.auth-field-hint.ok { color:#15803d; }.auth-field-hint.error { color:#dc2626; }

.auth-error {
  background: #fee2e2; color: #dc2626;
  border-radius: var(--r-md); padding: 10px 14px;
  font-size: 13px; font-weight: 500; display: none;
}
.auth-error.visible { display: block; }

.auth-switch { text-align: center; font-size: 14px; color: var(--text-secondary); margin-top: 16px; }
.auth-switch a { color: var(--color-accent); font-weight: 600; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }

/* ── Desktop auth: tarjeta centrada ── */
@media (min-width: 768px) {
  .auth-view {
    background: var(--bg-app);
    align-items: center;
    justify-content: center;
    padding: 40px 24px;
    min-height: 100dvh;
    width: 100vw;
  }

  .auth-card {
    background: var(--bg-card);
    border-radius: var(--r-xl);
    padding: 44px 52px;
    width: 100%;
    max-width: 460px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  }

  .auth-form { gap: 16px; }
  .auth-logo  { margin-bottom: 28px; }
}


/* ===== Global app top bar ===== */
.app-top-bar {
  display: grid;
  grid-template-columns: 84px minmax(0, calc(100% - 168px)) 84px;
  align-items: center;
  position: fixed;
  top: 0;
  right: 0;
  left: var(--app-rail-w);
  z-index: 230;
  height: var(--app-top-bar-h);
  padding: var(--safe-top) var(--app-top-bar-action-gutter) 0 var(--app-top-bar-gutter);
  background: var(--bg-card);
  border-bottom: 1px solid rgba(226, 232, 240, 0.92);
}
.app-top-bar__leading {
  grid-column: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-self: start;
}
.app-top-bar [hidden] { display:none!important; }
.app-top-bar__brand {
  display: flex;
  align-items: center;
  gap: var(--brand-lockup-gap);
  font-size: 17px;
  font-weight: 800;
  color: var(--text-primary);
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}
.app-top-bar__brand .brand-logo { width: 26px; height: 26px; }
.app-top-bar__back,
.app-top-bar__action {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  color: var(--text-secondary);
  transition: transform .16s var(--ease), background .16s var(--ease), color .16s var(--ease);
}
.app-top-bar__back:hover,
.app-top-bar__action:hover { background: var(--bg-input); color: var(--text-primary); }
.app-top-bar__back:active,
.app-top-bar__action:active { transform: scale(.94); }
.app-top-bar__back:focus-visible,
.app-top-bar__action:focus-visible { outline:2px solid var(--color-primary);outline-offset:2px; }
.app-top-bar__title {
  grid-column: 2;
  min-width: 0;
  width: 100%;
  max-width: 360px;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  justify-self: center;
  font-size: 15px;
  font-weight: 750;
  color: var(--text-primary);
}
.app-top-bar__actions {
  grid-column: 3;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-self: end;
  gap: 2px;
}
.app-top-bar__page-actions { display:flex;align-items:center;gap:2px; }
.app-top-bar__notification { display:flex;align-items:center; }

@media (min-width: 768px) {
  .app-top-bar__brand { display: none; }
  .app-top-bar__title { font-size:14px; }
}


/* ===== Home View ===== */
.home-view {
  padding: 0 0 calc(var(--nav-h) + var(--safe-bottom) + 36px);
  animation: fadeIn var(--duration) var(--ease);
}

.home-date-section { padding: 20px 20px 12px; }

.home-date-row {
  display: flex; align-items: center; gap: 16px; margin-bottom: 16px;
}
.date-circle {
  width: 60px; height: 60px; border-radius: var(--r-full);
  background: var(--color-primary); color: white;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 800; flex-shrink: 0;
}
.date-text__day   { font-size: 22px; font-weight: 800; line-height: 1.1; }
.date-text__month-btn {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px; color: var(--text-secondary); margin-top: 2px;
  background: none; border: none; padding: 0;
  cursor: pointer; font-family: inherit;
}
.date-text__month-btn svg { color: var(--text-muted); }

/* "Today" button */
.home-today-btn {
  margin-left: auto;
  padding: 6px 16px;
  font-size: 13px; font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-primary-light);
  border: none; border-radius: var(--r-full);
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Month picker */
.month-picker__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 20px;
}
.month-picker__year {
  font-size: 18px; font-weight: 700;
}
.month-picker__arrow {
  width: 36px; height: 36px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-input); border: none; cursor: pointer;
  color: var(--text-primary);
}
.month-picker__arrow:disabled {
  opacity: 0.3; cursor: not-allowed;
}
.month-picker__grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.month-picker__item {
  padding: 14px 0;
  font-size: 15px; font-weight: 500;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--bg-card);
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--duration), color var(--duration);
}
.month-picker__item:active:not(.disabled) {
  background: var(--bg-input);
}
.month-picker__item.active {
  background: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
  font-weight: 700;
}
.month-picker__item.disabled {
  opacity: 0.35; cursor: not-allowed;
}

/* Calendar day picker (step 2 of month picker) */
.cal-picker__days-header {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center;
  font-size: 13px; font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cal-picker__days-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  text-align: center;
}
.cal-picker__day {
  width: 100%; aspect-ratio: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 500;
  border-radius: var(--r-full);
  border: none; background: none;
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--duration);
}
.cal-picker__day:active:not(.disabled) {
  background: var(--bg-input);
}
.cal-picker__day.today {
  background: var(--color-primary);
  color: white; font-weight: 700;
}
.cal-picker__day.selected:not(.today) {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-weight: 700;
}
.cal-picker__day.disabled {
  opacity: 0.25; cursor: not-allowed;
}

/* Week strip wrapper with arrows */
.week-strip-wrap {
  display: flex; align-items: center; gap: 4px;
}
.week-strip__arrow {
  width: 28px; height: 28px; flex-shrink: 0;
  border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted); cursor: pointer;
  transition: background var(--duration), color var(--duration);
  background: none; border: none;
}
.week-strip__arrow:hover:not(:disabled) { background: var(--bg-input); color: var(--text-primary); }
.week-strip__arrow:disabled { opacity: 0.25; cursor: not-allowed; }
.week-strip__arrow svg { width: 16px; height: 16px; }

.week-strip {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin-bottom: 4px; flex: 1;
  touch-action: pan-y; /* Allow vertical scroll, capture horizontal */
  user-select: none;
}
.week-strip__day {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  transition: opacity var(--duration);
}
.week-strip__day.future { opacity: 0.35; }
.week-strip__label { font-size: 10px; font-weight: 600; color: var(--text-muted); text-transform: uppercase; }
.week-strip__num {
  width: 32px; height: 32px; border-radius: var(--r-full);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 600; color: var(--text-secondary);
  transition: background var(--duration), color var(--duration), box-shadow var(--duration);
}
.week-strip__num:not(.future):hover { background: var(--bg-input); }
.week-strip__num.today { background: var(--color-primary); color: white; font-weight: 800; }
.week-strip__num.selected:not(.today) {
  background: var(--text-primary); color: white; font-weight: 700;
}
.week-strip__num.selected.today {
  box-shadow: 0 0 0 2px var(--color-primary-dark);
}

.home-section { padding: 16px 20px 8px; }

/* Greeting */
.home-greeting { padding: 20px 20px 0; }
.home-greeting__text { font-size: 20px; font-weight: 700; color: var(--text-primary); }

/* Progress bar */
.home-progress { padding: 12px 20px 0; }
.progress-summary {
  background: var(--bg-card); border-radius: var(--r-lg);
  padding: 14px 16px; box-shadow: var(--shadow-card);
}
.progress-summary__header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.progress-summary__label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.progress-summary__pct   { font-size: 14px; font-weight: 800; color: var(--color-primary); }
.progress-bar {
  height: 8px; background: var(--bg-input); border-radius: 99px;
  overflow: hidden;
}
.progress-bar__fill {
  height: 100%; background: var(--color-primary); border-radius: 99px;
  transition: width 0.5s var(--ease); min-width: 0;
}
.progress-summary__text {
  font-size: 12px; color: var(--text-muted); margin-top: 8px; margin-bottom: 0;
}

/* ── Desktop home ── */
@media (min-width: 768px) {
  .home-view { padding-bottom: 40px; }

  /* Constrain all home content areas */
  .home-greeting     { padding: 28px 32px 0; max-width: var(--content-max-w); margin: 0 auto; }
  .home-greeting__text { font-size: 24px; }
  .home-date-section { padding: 20px 32px 16px; max-width: var(--content-max-w); margin: 0 auto; }
  .home-progress     { padding: 12px 32px 0; max-width: var(--content-max-w); margin: 0 auto; }
  .home-section      { padding: 16px 32px 16px; max-width: var(--content-max-w); margin: 0 auto; }
}

@media (min-width: 1280px) {
  .home-greeting     { padding: 28px 40px 0; }
  .home-date-section { padding: 20px 40px 16px; }
  .home-progress     { padding: 12px 40px 0; }
  .home-section      { padding: 16px 40px 16px; }
}


/* ===== Habits List View ===== */
.habits-view-header {
  background: transparent;
  border-bottom: none;
}
.habits-view-header__inner {
  display: flex; align-items: center;
  justify-content: space-between;
  padding: 16px 20px 12px;
  width: 100%;
}
.habits-view-title { font-size: 22px; font-weight: 800; }
.habits-list-body  { padding: 16px 20px; }

@media (min-width: 768px) {
  .habits-view-header__inner {
    padding: 20px 32px 16px;
    max-width: var(--content-max-w);
    margin: 0 auto;
  }
  .habits-list-body {
    padding: 20px 32px;
    max-width: var(--content-max-w);
    margin: 0 auto;
    width: 100%;
  }
}
@media (min-width: 1280px) {
  .habits-view-header__inner {
    padding: 20px 40px 16px;
  }
  .habits-list-body {
    padding: 24px 40px;
  }
}


/* ===== Habit Form View ===== */
.habit-form-body { padding: 24px 20px; }

.habit-form-top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 24px;
}
.habit-name-input {
  flex: 1;
  background: var(--bg-input); border-radius: var(--r-md);
  padding: 14px 16px; font-size: 17px; font-weight: 600;
  border: 1.5px solid transparent; transition: border-color var(--duration);
}
.habit-name-input:focus { border-color: var(--color-primary); }
.habit-name-input::placeholder { color: var(--text-muted); font-weight: 500; }

.form-submit-bar {
  padding: 12px 20px 0;
  background: transparent;
}
.form-submit-bar .btn {
  width: 100%;
  background: var(--color-accent);
  color: white;
  padding: 16px;
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--r-md);
}
.form-submit-bar .btn:hover {
  box-shadow: 0 4px 14px rgba(99,102,241,0.35);
}

@media (min-width: 768px) {
  .habit-form-body { padding: 28px 32px; max-width: 680px; margin: 0 auto; }
  .form-submit-bar { padding: 16px 32px 20px; max-width: 680px; margin: 0 auto; }
  .habit-form-view { padding-bottom: 24px; }
}


/* ===== Habit Detail View ===== */
.detail-view { padding: 0; }

.detail-habit-info {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 20px;
}

/* Personal best banner */
.detail-personal-best {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: #fef9c3;
  border-radius: var(--r-md);
  font-size: 14px; font-weight: 600;
  color: #92400e;
}
.detail-personal-best svg { width: 20px; height: 20px; color: #f59e0b; flex-shrink: 0; }
.detail-icon {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; flex-shrink: 0;
}
.detail-icon svg { width: 24px; height: 24px; }
.detail-name { font-size: 17px; font-weight: 700; }
.detail-freq { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }

.detail-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }

.detail-checked-label {
  text-align: center; font-size: 13px;
  color: var(--text-secondary); font-weight: 500;
}
.profile-wallet--debt { border-color:rgba(248,113,113,.55)!important; background:rgba(127,29,29,.28)!important; }
.detail-manage { background: var(--bg-card); border-radius: var(--r-lg); padding: 0 16px; }
.detail-manage-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; padding-top: 14px;
}

@media (min-width: 768px) {
  .detail-habit-info {
    padding: 20px 32px;
    max-width: var(--content-max-w);
    margin: 0 auto;
  }
  .detail-body {
    max-width: 680px;
    margin: 0 auto;
    padding: 24px 32px;
    width: 100%;
  }
}


/* ===== More View ===== */
.more-view { padding: 0 20px calc(var(--nav-h) + 40px); }
.more-section { margin-top: 24px; }
.more-section-title {
  font-size: 11px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.more-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  cursor: pointer; font-size: 15px; font-weight: 500;
  background: none; border: none; width: 100%; text-align: left;
  border-bottom: 1px solid var(--border);
  transition: opacity var(--duration);
}
.more-row:last-child { border-bottom: none; }
.more-row:hover { opacity: 0.7; }
.more-row svg { width: 20px; height: 20px; color: var(--text-secondary); }
.more-row span { flex: 1; }
.more-row .chevron { color: var(--text-muted); }

@media (min-width: 768px) {
  .more-view { padding: 24px 32px 40px; max-width: 560px; margin: 0 auto; }
}

/* ===== RPG Habit Fields ===== */
.form-select {
  width: 100%; height: 100%; padding: 0 52px 0 14px;
  appearance: none; background: transparent; border: 0; border-radius: inherit;
  font-size: 14px; font-weight: 650; cursor: pointer;
}
.form-select:disabled { color: var(--text-muted); cursor: not-allowed; }
.select-field {
  position: relative; width: 100%; height: 48px; margin: 7px 0 20px; border: 1.5px solid var(--border);
  border-radius: var(--r-md); background: var(--bg-card); box-shadow: 0 1px 2px rgba(15,23,42,.035);
  transition: border-color var(--duration), box-shadow var(--duration), background var(--duration);
}
.select-field:hover:not(:has(.form-select:disabled)) { border-color: #c7cdd6; background: #fff; }
.select-field:focus-within { border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(99,102,241,.12); }
.select-field.invalid { border-color: #ef4444; box-shadow: 0 0 0 3px rgba(239,68,68,.1); }
.select-field__chevron {
  position: absolute; top: 7px; right: 7px; width: 34px; height: 34px; display: grid; place-items: center;
  border-left: 1px solid var(--border); color: var(--text-secondary); pointer-events: none;
}
.select-field:focus-within .select-field__chevron { color: var(--color-accent); }
.form-required { color: #dc2626; }
.form-error { margin: -12px 0 17px; color: #dc2626; font-size: 11px; font-weight: 650; }
.form-error[hidden] { display: none; }
.form-inline-link { color: var(--color-accent); font-weight: 650; font-size: 13px; margin: -10px 0 18px; }
.habit-multi-row { margin-top: 22px; padding: 18px 0 4px; border-top: 1px solid var(--border); }
/* ===== Category Settings ===== */
.settings-state, .profile-loading { min-height: 70dvh; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; color: var(--text-muted); }
.category-settings-view { background: var(--bg-app); }
.category-settings-intro, .category-settings-list, .category-add-btn { width: calc(100% - 40px); max-width: 680px; margin-left: auto; margin-right: auto; }
.category-settings-intro { padding: 22px 0 20px; }
.eyebrow { display: inline-block; color: var(--color-primary-dark); font-size: 10px; font-weight: 800; letter-spacing: .12em; }
.category-settings-intro h1 { font-size: 28px; letter-spacing: -.04em; margin: 3px 0 7px; }
.category-settings-intro p { max-width: 500px; color: var(--text-secondary); font-size: 14px; }
.category-settings-list { border-top: 1px solid var(--border); }
.category-settings-row { display: flex; align-items: center; gap: 12px; min-height: 72px; border-bottom: 1px solid var(--border); transition: opacity var(--duration); }
.category-settings-row.archived { opacity: .58; }
.category-settings-icon, .category-editor-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.category-settings-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.category-settings-copy strong { font-size: 14px; }
.category-settings-copy span { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.category-settings-actions { display: flex; gap: 2px; }
.category-settings-actions button { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--text-secondary); }
.category-settings-actions button:hover { background: var(--bg-input); }
.category-settings-actions button:disabled { opacity: .22; cursor: default; }
.category-order-btn--up svg { transform: rotate(180deg); }
.category-add-btn { margin-top: 22px; height: 50px; border: 1px dashed #a7b0bd; border-radius: var(--r-md); color: var(--color-accent); display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; }
.category-editor-sheet { max-height: min(720px, 90dvh); }
.category-editor-content { padding: 8px 20px calc(22px + var(--safe-bottom)); }
.category-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; }
.category-editor-heading h2 { margin-top: 3px; font-size: 22px; letter-spacing: -.03em; }
.category-editor-close { width: 34px; height: 34px; border-radius: 50%; background: var(--bg-input); display: grid; place-items: center; transform: rotate(45deg); }
.category-editor-name-row { display: flex; gap: 10px; margin: 7px 0 20px; }
.category-editor-name-row .form-input { flex: 1; background: var(--bg-input); border-radius: var(--r-md); padding: 13px 14px; }
.category-color-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin: 8px 0 22px; }
.category-color-grid .color-swatch { width: 100%; aspect-ratio: 1; max-width: 38px; }
.category-archive-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 0; border-top: 1px solid var(--border); }
.category-archive-toggle > span:first-child { display: flex; flex-direction: column; }
.category-archive-toggle strong { font-size: 14px; }
.category-archive-toggle small { color: var(--text-muted); font-size: 11px; margin-top: 2px; }
.category-editor-save { width: 100%; margin-top: 8px; background: var(--color-accent); color: white; border-radius: var(--r-md); padding: 14px; font-weight: 750; }

/* ===== RPG Profile ===== */
.profile-view { background: #f7f8f7; }
.profile-hero { position: relative; min-height: 450px; padding: 24px 22px 30px; overflow: hidden; display: grid; align-items: end; background: #eff8f1; }
.profile-hero__glow { position: absolute; width: 360px; height: 360px; border-radius: 50%; left: 50%; top: -100px; transform: translateX(-50%); background: radial-gradient(circle, rgba(99,102,241,.18), rgba(34,197,94,.07) 54%, transparent 72%); }
.profile-avatar-stage { height: 255px; position: relative; display: flex; align-items: flex-end; justify-content: center; opacity: 0; transform: translateY(14px) scale(.98); transition: opacity 480ms var(--ease), transform 580ms cubic-bezier(.22,1,.36,1); }
.profile-avatar-stage::after { content: ''; position: absolute; bottom: 6px; width: 180px; height: 24px; border-radius: 50%; background: rgba(30,64,175,.1); filter: blur(9px); }
.profile-avatar-stage img { position: relative; z-index: 1; height: 265px; width: auto; object-fit: contain; filter: drop-shadow(0 16px 16px rgba(27,70,46,.13)); }
.profile-level-badge { position: absolute; z-index: 2; right: calc(50% - 126px); top: 20px; padding: 6px 10px; background: #111827; color: white; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .08em; }
.profile-identity { max-width: 480px; width: 100%; margin: 8px auto 0; position: relative; z-index: 2; }
.profile-identity h1 { font-size: clamp(28px, 8vw, 38px); letter-spacing: -.045em; line-height: 1.02; margin: 3px 0 5px; }
.profile-identity > p { color: var(--text-secondary); font-size: 13px; }
.profile-xp-line { display: flex; justify-content: space-between; margin-top: 17px; font-size: 11px; font-weight: 700; }
.xp-track, .skill-track { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(99,102,241,.12); margin-top: 6px; }
.xp-track span, .skill-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--color-primary), var(--color-accent)); transition: width 850ms cubic-bezier(.22,1,.36,1) 180ms; }
.profile-ready .xp-track span { width: var(--xp-progress); }
.profile-identity small { display: block; margin-top: 7px; color: var(--text-muted); font-size: 10px; }
.profile-ready .profile-avatar-stage { opacity: 1; transform: translateY(0) scale(1); }
.profile-body { max-width: 840px; padding: 0 20px 46px; margin: 0 auto; }
.profile-stats-line { display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid var(--border); }
.profile-stats-line > div { min-width: 0; padding: 20px 4px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.profile-stats-line svg { color: var(--color-primary-dark); margin-bottom: 5px; }
.profile-stats-line strong { font-size: 19px; line-height: 1; }
.profile-stats-line span { color: var(--text-muted); font-size: 9px; margin-top: 4px; }
.profile-skills-heading { padding: 28px 0 14px; display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.profile-skills-heading h2 { font-size: 23px; letter-spacing: -.035em; }
.profile-skills-heading p { color: var(--text-muted); font-size: 11px; text-align: right; max-width: 150px; }
.profile-skills-list { border-top: 1px solid var(--border); }
.profile-skill { display: flex; align-items: center; gap: 13px; padding: 16px 0; border-bottom: 1px solid var(--border); opacity: 0; transform: translateY(6px); transition: opacity 380ms var(--ease) var(--skill-delay), transform 380ms var(--ease) var(--skill-delay); }
.profile-ready .profile-skill { opacity: 1; transform: translateY(0); }
.profile-skill.archived { opacity: .55; }
.profile-skill__icon { width: 44px; height: 44px; border-radius: 14px; display: grid; place-items: center; flex-shrink: 0; }
.profile-skill__main { flex: 1; min-width: 0; }
.profile-skill__title { display: flex; align-items: center; gap: 7px; }
.profile-skill__title strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-skill__title b { margin-left: auto; font-size: 11px; color: var(--skill-color); }
.profile-skill__title > span { padding: 2px 5px; border-radius: 5px; background: var(--bg-input); color: var(--text-muted); font-size: 8px; text-transform: uppercase; }
.profile-skill__meta { display: flex; justify-content: space-between; color: var(--text-muted); font-size: 9px; margin-top: 3px; }
.skill-track { height: 5px; background: color-mix(in srgb, var(--skill-color) 12%, white); }
.skill-track span { background: var(--skill-color); transition-delay: var(--skill-delay); }
.profile-ready .skill-track span { width: var(--skill-progress); }

@media (min-width: 768px) {
  .category-settings-intro, .category-settings-list, .category-add-btn { width: calc(100% - 64px); }
  .profile-hero { min-height: 410px; grid-template-columns: minmax(260px, 390px) minmax(320px, 480px); justify-content: center; align-items: center; gap: 22px; padding: 32px; }
  .profile-avatar-stage { height: 330px; }
  .profile-avatar-stage img { height: 340px; }
  .profile-identity { margin: 0; }
  .profile-body { padding-left: 32px; padding-right: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .profile-avatar-stage, .profile-skill, .xp-track span, .skill-track span { transition: none !important; opacity: 1; transform: none; }
}

/* ===== Pixel RPG: avatar, chest and store ===== */
.pixel-avatar { image-rendering: pixelated; image-rendering: crisp-edges; }
.profile-hero { min-height: 570px; }
.profile-avatar-stage { align-items: center; background: linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.15)); border: 1px solid rgba(255,255,255,.8); border-radius: 34px; overflow: hidden; }
.profile-avatar-stage::before { content:''; position:absolute; inset:0; opacity:.18; background-image: linear-gradient(rgba(99,102,241,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.16) 1px,transparent 1px); background-size:16px 16px; }
.profile-pixel-avatar { position: relative; z-index: 1; width: min(245px,80vw); height: min(245px,80vw); object-fit: contain; filter: drop-shadow(0 17px 10px rgba(15,23,42,.18)); }
.profile-pixel-caption { position:absolute; z-index:2; left:14px; bottom:12px; font-size:8px; font-weight:900; letter-spacing:.12em; color:#475569; }
.profile-wallet { display:flex; gap:8px; flex-wrap:wrap; margin-top:12px; }
.profile-social-link { display:inline-flex; align-items:center; gap:6px; margin-top:10px; color:#4338ca; font-size:10px; font-weight:800; }
.profile-wallet span { padding:6px 9px; border-radius:9px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9); font-size:10px; color:var(--text-secondary); }
.profile-wallet span:first-child { color:#a16207; }
.profile-game-actions { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-top:16px; }
.profile-game-actions button { min-height:42px; display:flex; align-items:center; justify-content:center; gap:6px; border-radius:12px; background:rgba(255,255,255,.72); border:1px solid rgba(255,255,255,.9); font-size:11px; font-weight:750; box-shadow:0 4px 14px rgba(15,23,42,.05); }
.profile-game-actions button:first-child { grid-column:1/-1; background:#111827; color:white; }
.profile-game-actions button b { font-size:9px; color:var(--text-muted); }
.pixel-action-icon { font-family:monospace; font-size:17px; }

.game-page { background:linear-gradient(180deg,#f7faf8 0,#f4f4f5 100%); }
.game-shell { width:calc(100% - 32px); max-width:1040px; margin:0 auto; padding:12px 0 38px; }
.game-primary,.game-secondary { min-height:46px; padding:11px 16px; border-radius:13px; font-weight:750; }
.game-primary { color:white; background:linear-gradient(135deg,#16a34a,#22c55e); box-shadow:0 7px 18px rgba(34,197,94,.22); }
.game-primary:disabled { opacity:.5; }
.game-secondary { background:white; border:1px solid var(--border); }
.text-danger { color:#dc2626; font-size:12px; font-weight:700; padding:8px; }
.pixel-stage { position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.94); background:linear-gradient(160deg,#e9f9ee,#eceeff); box-shadow:0 18px 50px rgba(30,64,175,.1),inset 0 1px 0 white; }
.pixel-stage__grid { position:absolute; inset:0; opacity:.2; background-image:linear-gradient(rgba(79,70,229,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(79,70,229,.15) 1px,transparent 1px); background-size:18px 18px; }
.pixel-stage--editor { height:340px; border-radius:28px; }
.pixel-stage--editor canvas { position:relative; width:300px; height:300px; max-width:88%; max-height:88%; filter:drop-shadow(0 18px 10px rgba(15,23,42,.2)); transform:translateY(8px); transition:transform .45s cubic-bezier(.22,1,.36,1); }
.game-ready .pixel-stage--editor canvas { transform:translateY(0); }
.pixel-badge { position:absolute; bottom:14px; left:16px; padding:5px 7px; border-radius:6px; background:#111827; color:white; font:800 8px/1 monospace; letter-spacing:.12em; }
.avatar-editor-layout { width:calc(100% - 32px); max-width:1040px; margin:0 auto; padding:10px 0 34px; display:grid; gap:18px; }
.avatar-controls { min-width:0; }
.segmented,.store-tabs { display:flex; gap:3px; padding:4px; overflow-x:auto; scrollbar-width:none; border-radius:15px; background:rgba(226,232,240,.7); margin-bottom:18px; }
.segmented button,.store-tabs button { flex:1; min-width:max-content; padding:9px 11px; border-radius:11px; color:var(--text-secondary); font-size:11px; font-weight:700; }
.segmented button.active,.store-tabs button.active { background:white; color:var(--text-primary); box-shadow:0 2px 8px rgba(15,23,42,.09); }
.control-section { animation:fadeIn 200ms var(--ease); }
.control-section h2,.store-intro h2,.game-section-heading h2 { font-size:24px; letter-spacing:-.04em; line-height:1.1; }
.control-section>p,.store-intro p { color:var(--text-secondary); font-size:12px; margin:6px 0 18px; max-width:550px; }
.choice-row,.option-chip-row,.swatch-row { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.option-group { padding:16px 0; border-bottom:1px solid var(--border); }
.option-group>label { display:block; color:var(--text-secondary); font-size:11px; font-weight:750; }
.base-gear-controls { border-top:1px solid var(--border); }
.base-gear-row { min-height:62px; display:flex; align-items:center; gap:14px; padding:13px 0; border-bottom:1px solid var(--border); }
.base-gear-row>span { min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
.base-gear-row strong { font-size:12px; }
.base-gear-row small { color:var(--text-muted); font-size:9px; line-height:1.45; }
.base-gear-row>b { flex:none; padding:5px 8px; border-radius:8px; background:#ecfdf5; color:#15803d; font-size:8px; font-weight:850; letter-spacing:.04em; text-transform:uppercase; }
.base-gear-controls .option-group>small { display:block; margin-top:8px; color:var(--text-muted); font-size:9px; line-height:1.45; }
.base-shoes-control { border-bottom:1px solid var(--border); }
.option-chip { min-height:36px; padding:8px 12px; border:1px solid var(--border); border-radius:11px; background:rgba(255,255,255,.64); font-size:11px; font-weight:650; }
.option-chip.active { color:#4338ca; border-color:#818cf8; background:#eef2ff; box-shadow:inset 0 0 0 1px #a5b4fc; }
.avatar-swatch { --swatch:#ccc; width:44px; height:44px; border-radius:13px; background:var(--swatch); border:3px solid white; box-shadow:0 0 0 1px var(--border); }
.avatar-swatch.small { width:35px; height:35px; border-radius:10px; }
.avatar-swatch.active { box-shadow:0 0 0 3px #6366f1; }
.avatar-controls>.game-primary { width:100%; margin-top:22px; }
.gear-collection-section { margin-top:30px; padding-top:25px; border-top:1px solid var(--border); }
.gear-category-tabs { display:flex; gap:6px; margin:15px 0 17px; overflow-x:auto; scrollbar-width:none; }
.gear-category-tabs::-webkit-scrollbar { display:none; }
.gear-category-tab { min-width:max-content; min-height:34px; padding:8px 11px; border:1px solid var(--border); border-radius:10px; background:rgba(255,255,255,.72); color:var(--text-secondary); font-size:9px; font-weight:800; transition:color .16s var(--ease),background .16s var(--ease),border-color .16s var(--ease),transform .16s var(--ease); }
.gear-category-tab:hover { transform:translateY(-1px); border-color:#a5b4fc; color:#4338ca; }
.gear-category-tab.active { border-color:#111827; background:#111827; color:#fff; }
.gear-category-tab small,.store-filters button small,.gear-accessory-tabs button small { margin-left:3px; opacity:.68; font-size:8px; }
.gear-category-tab:focus-visible { outline:3px solid rgba(99,102,241,.28); outline-offset:2px; }
.gear-category-panel { animation:gearCategoryIn 180ms var(--ease); }
.gear-accessory-tabs { display:flex; gap:5px; overflow:auto; margin-bottom:10px; padding-bottom:2px; scrollbar-width:none; }.gear-accessory-tabs button { min-width:max-content; padding:7px 10px; border-radius:9px; background:#e5e7eb; color:var(--text-secondary); font-size:9px; font-weight:800; }.gear-accessory-tabs button.active { background:#312e81; color:white; }
.gear-category-heading { min-height:34px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gear-category-heading strong { font-size:12px; }
.gear-category-heading span { color:var(--text-muted); font-size:9px; font-weight:750; }
.gear-none-row { display:flex; gap:7px; overflow:auto; margin-top:8px; scrollbar-width:none; }.gear-none-option { min-width:130px; display:grid; grid-template-columns:22px 1fr; grid-template-rows:auto auto; column-gap:7px; align-items:center; padding:7px 9px; border:1px solid var(--border); border-radius:11px; background:white; text-align:left; }.gear-none-option>span { grid-row:1/3; display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:#f1f5f9; color:#64748b; }.gear-none-option strong { font-size:9px; }.gear-none-option small { color:var(--text-muted); font-size:8px; }.gear-none-option.active { border-color:#a5b4fc; background:#eef2ff; }.gear-none-option:disabled { opacity:1; cursor:default; }
.gear-list { margin-top:12px; border-top:1px solid var(--border); }
.gear-list.empty { border-top:1px solid var(--border); }
.gear-row { width:100%; min-height:66px; display:flex; align-items:center; gap:11px; text-align:left; border-bottom:1px solid var(--border); transition:background .16s var(--ease),padding .16s var(--ease); }
.gear-row:hover { padding-right:8px; padding-left:8px; background:rgba(255,255,255,.62); }
.gear-row .item-avatar-preview { width:58px; height:58px; flex:none; border-radius:12px; }
.gear-row>span:nth-child(2) { flex:1; display:flex; flex-direction:column; }
.gear-row strong { font-size:12px; }.gear-row small { color:var(--text-muted); font-size:9px; margin-top:2px; }.gear-row>b { color:#4f46e5; font-size:10px; }.gear-row.equipped>b { color:#dc2626; }
.gear-empty-state { min-height:132px; }
@keyframes gearCategoryIn { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
.pose-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:14px; }
.pose-grid .option-chip { min-height:72px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px; }
.pose-grid .option-chip span { font:900 24px monospace; }
.hair-style-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:15px; }
.hair-style-option { min-width:0; padding:7px; border:1px solid var(--border); border-radius:14px; background:rgba(255,255,255,.7); transition:border-color .18s,box-shadow .18s,transform .18s; }
.hair-style-option:hover { transform:translateY(-2px); }.hair-style-option.active { border-color:#6366f1; box-shadow:0 0 0 2px #c7d2fe; background:#eef2ff; }
.hair-style-option strong { display:block; margin-top:4px; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hair-style-preview { height:78px; display:grid; place-items:center; overflow:hidden; border-radius:10px; background:linear-gradient(160deg,#ecfdf5,#eef2ff); }
.hair-style-preview canvas { width:80px; height:80px; filter:drop-shadow(0 6px 4px rgba(15,23,42,.14)); }
.hair-premium-note { margin-top:12px; padding:10px 12px; border-radius:11px; background:#fff7ed; color:#9a3412; font-size:9px; }
.published-feature-group{margin-top:20px}.published-feature-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:10px;margin-top:9px}.published-feature-option{display:grid;place-items:center;gap:6px;min-height:112px;padding:9px;border:1px solid var(--border);border-radius:14px;background:white;color:var(--text-primary);transition:border-color .16s var(--ease),transform .16s var(--ease),background .16s var(--ease)}.published-feature-option:hover{transform:translateY(-2px);border-color:#6366f1}.published-feature-option.active{border-color:#6366f1;background:#eef2ff;box-shadow:0 0 0 2px #c7d2fe}.published-feature-option canvas{width:64px;height:64px;image-rendering:pixelated}.published-feature-option strong{font-size:9px;line-height:1.2;text-align:center}
.published-feature-option--none span{display:grid;place-items:center;width:48px;height:48px;border:1px dashed var(--border);border-radius:50%;color:var(--text-secondary);font-size:24px;font-weight:300}

.item-pixel,.store-item-art { display:grid; place-items:center; font:900 28px/1 monospace; color:#fff; text-shadow:2px 2px 0 rgba(0,0,0,.2); image-rendering:pixelated; }
.item-pixel { width:46px; height:46px; flex:none; border-radius:4px; box-shadow:inset 0 -5px 0 rgba(0,0,0,.13); }
.item-pixel--green{background:#22c55e}.item-pixel--indigo{background:#6366f1}.item-pixel--gold{background:#eab308}.item-pixel--steel{background:#64748b}.item-pixel--charcoal{background:#27272a}.item-pixel--teal{background:#14b8a6}.item-pixel--orange{background:#f97316}.item-pixel--purple{background:#8b5cf6}.item-pixel--brown{background:#7c4a2d}.item-pixel--cyan{background:#06b6d4}.item-pixel--red{background:#dc2626}
.empty-game-state { padding:34px 12px; text-align:center; color:var(--text-muted); font-size:12px; }.empty-game-state button { display:block; margin:12px auto 0; color:#4f46e5; font-weight:750; }.empty-game-state.wide{grid-column:1/-1;}

.chest-hero,.store-wallet { position:relative; display:grid; align-items:center; gap:14px; padding:20px; border-radius:24px; background:linear-gradient(135deg,#18212f,#28364d); color:white; box-shadow:0 16px 38px rgba(15,23,42,.18); overflow:hidden; }
.chest-hero>div:nth-child(2) { min-width:0; }.chest-hero h1,.store-wallet h1 { font-size:24px; letter-spacing:-.035em; }.chest-hero p,.store-wallet p { color:#b8c2d1; font-size:10px; margin-top:6px; }.chest-hero .eyebrow,.store-wallet .eyebrow { color:#86efac; }
.pixel-chest { width:86px; height:62px; position:relative; margin:auto; background:#8b572a; border:6px solid #422a16; box-shadow:inset 0 -10px 0 #6f431f,7px 7px 0 rgba(0,0,0,.24); image-rendering:pixelated; }.pixel-chest:before{content:'';position:absolute;left:-6px;right:-6px;top:-15px;height:20px;background:#a66b32;border:6px solid #422a16}.pixel-chest i{position:absolute;width:18px;height:22px;background:#eab308;border:4px solid #713f12;left:28px;top:16px}.pixel-chest b{position:absolute;width:54px;height:5px;background:#d5a150;left:10px;bottom:4px}
.capacity-track { height:7px; border-radius:99px; background:rgba(255,255,255,.14); overflow:hidden; margin-top:10px; }.capacity-track span{display:block;height:100%;background:linear-gradient(90deg,#22c55e,#a3e635);border-radius:inherit;}
.wallet-chip { justify-self:start; padding:8px 10px; border-radius:10px; background:rgba(255,255,255,.1); color:#fde68a; font-size:11px; }
.pending-claim { display:grid; gap:12px; margin-top:14px; padding:18px; border:1px solid #fbbf24; border-radius:20px; background:#fffbeb; }.claim-spark{width:38px;height:38px;display:grid;place-items:center;background:#f59e0b;color:white;font:bold 22px monospace;box-shadow:4px 4px 0 #92400e}.pending-claim h2{font-size:19px}.pending-claim p{font-size:11px;color:var(--text-secondary);margin-top:4px}.pending-claim small{font-size:9px;color:#92400e}.claim-actions{display:flex;flex-direction:column;gap:6px;}
.game-section-heading { display:flex; align-items:end; justify-content:space-between; gap:14px; margin:28px 0 12px; }.game-section-heading button{color:#4f46e5;font-size:11px;font-weight:750;}
.inventory-grid,.store-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.inventory-card,.store-card { min-width:0; position:relative; padding:10px; border:1px solid var(--border); border-radius:18px; background:rgba(255,255,255,.82); box-shadow:0 5px 18px rgba(15,23,42,.04); overflow:hidden; }.inventory-card .item-pixel{margin-bottom:10px}.rarity-label{color:var(--text-muted);font-size:7px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.inventory-card h3,.store-card h3{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px}.inventory-card__info>p,.store-card__info>p{font-size:8px;color:var(--text-muted);margin-top:2px;}.equipped-label{display:inline-block;margin-top:7px;padding:3px 6px;background:#dcfce7;color:#15803d;border-radius:5px;font-size:7px;font-weight:850;text-transform:uppercase}.inventory-actions{display:flex;gap:5px;margin-top:10px}.inventory-actions button{height:34px;border-radius:9px;background:var(--bg-input);font-size:9px;font-weight:750}.equip-action{flex:1}.discard-action{width:34px;color:#dc2626}.inventory-card.swap-mode{outline:2px solid #f59e0b}.swap-pick{width:100%;height:36px;margin-top:7px;border-radius:9px;background:#f59e0b!important;color:#fff;font-weight:800!important}
.rarity-rare{border-color:#a5b4fc}.rarity-epic{border-color:#d8b4fe;background:linear-gradient(145deg,#fff,rgba(245,208,254,.28))}

.store-wallet { grid-template-columns:1fr auto; background:linear-gradient(135deg,#1e1b4b,#3730a3); }.store-wallet--debt{background:linear-gradient(135deg,#450a0a,#7f1d1d)}.store-wallet h1 span{color:#fbbf24}.store-wallet button{grid-row:1/3;grid-column:2;padding:10px 12px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.18);border-radius:11px;color:white;font-size:10px;font-weight:800}.store-wallet button:disabled{opacity:.45;cursor:not-allowed}.store-tabs{margin:16px 0}.store-intro{padding:8px 2px 14px}.store-filters{display:flex;gap:6px;margin-bottom:13px;overflow:auto;scrollbar-width:none}.store-filters--sub{margin-top:-6px;padding-left:7px}.store-filters--sub button{padding:6px 10px;background:#eef2ff;color:#4338ca}.store-filters--sub button.active{background:#312e81}.chest-filters{margin-top:2px}.store-filters button{min-width:max-content;padding:8px 12px;border-radius:10px;background:#e5e7eb;color:var(--text-secondary);font-size:9px;font-weight:800}.store-filters button.active{background:#111827;color:white}.store-card{padding:9px;opacity:0;transform:translateY(8px);animation:storeCardIn 360ms cubic-bezier(.22,1,.36,1) var(--store-delay) forwards}.store-card__info{padding:5px 2px 0}.store-card__info>div{display:flex;align-items:center;justify-content:space-between}.owned-label{padding:2px 5px;border-radius:5px;background:#dcfce7;color:#15803d;font-size:7px;font-weight:900}.store-card__actions{display:grid;grid-template-columns:.8fr 1.2fr;gap:5px;margin-top:9px}.store-card__actions button{min-height:36px;padding:6px;border-radius:10px;font-size:9px;font-weight:800}.store-try{background:var(--bg-input);color:var(--text-secondary)}.store-buy{background:#111827;color:white}.store-buy:disabled{background:#e5e7eb;color:#9ca3af}.store-card.owned{border-color:#86efac}.mini-chest{position:relative;width:58px;height:42px;background:#8b572a;border:5px solid #422a16;display:grid;place-items:center}.mini-chest:before{content:'';position:absolute;left:-5px;right:-5px;top:-10px;height:13px;background:#a66b32;border:4px solid #422a16}.mini-chest b{position:relative;z-index:2;color:#fff;font-size:12px}.storage-preview{height:142px;margin:-1px -1px 10px;border-radius:13px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px}.storage-preview small{color:white;font-size:10px;font-weight:900}.coin-pack-grid{display:grid;grid-template-columns:1fr;gap:10px}.coin-pack{padding:20px;border:1px solid var(--border);border-radius:18px;background:white;text-align:center}.coin-stack{width:62px;height:62px;margin:0 auto 10px;display:grid;place-items:center;border-radius:50%;background:#fbbf24;color:#92400e;border:6px solid #fde68a;box-shadow:5px 5px 0 #b45309;font-size:26px}.coin-pack h3{font-size:13px}.coin-pack strong{display:block;font-size:21px;color:#a16207;margin-top:4px}.coin-pack p{font-size:10px;color:var(--text-muted)}.payment-note{margin-top:12px;padding:12px;border-radius:11px;background:#fff7ed;color:#9a3412;font-size:10px}.exchange-sheet{padding:22px;max-width:390px;margin:auto;border-radius:22px}.exchange-sheet h2{font-size:22px;margin-top:4px}.exchange-sheet p{font-size:11px;color:var(--text-secondary);margin:7px 0 18px}.exchange-sheet label{font-size:10px;font-weight:750}.exchange-sheet input{width:100%;margin:6px 0 8px;padding:13px;border-radius:11px;background:var(--bg-input);font-weight:800}.exchange-result{display:block;color:#a16207;margin-bottom:14px}.exchange-sheet button{width:100%;margin-top:6px}
.item-avatar-preview{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(155deg,#ecfdf5,#eef2ff);background-image:linear-gradient(rgba(99,102,241,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(99,102,241,.08) 1px,transparent 1px),linear-gradient(155deg,#ecfdf5,#eef2ff);background-size:14px 14px,14px 14px,auto}.item-avatar-preview canvas{width:118px;height:118px;max-width:94%;max-height:94%;filter:drop-shadow(0 8px 5px rgba(15,23,42,.18));transition:transform .25s cubic-bezier(.22,1,.36,1)}.store-card:hover .item-avatar-preview canvas{transform:scale(1.07) translateY(-2px)}.store-item-art.item-avatar-preview{height:142px;margin:-1px -1px 10px;border-radius:13px}.item-avatar-preview--compact canvas{width:58px;height:58px}.inventory-card>.item-avatar-preview{height:120px;margin:-1px -1px 9px;border-radius:12px}.inventory-card.equipped>.item-avatar-preview{box-shadow:inset 0 0 0 2px #22c55e}
.store-preview-overlay{display:grid;place-items:end center}.store-preview-sheet{position:relative;width:100%;max-width:480px;padding:18px;border-radius:26px 26px 0 0;background:white}.store-preview-close{position:absolute;z-index:2;top:12px;right:12px;width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:rgba(255,255,255,.88)}.store-preview-hero{height:300px;border-radius:20px}.store-preview-hero canvas{width:270px;height:270px}.store-preview-copy{padding:16px 2px}.store-preview-copy h2{font-size:25px;letter-spacing:-.04em}.store-preview-copy p{margin-top:5px;color:var(--text-secondary);font-size:11px}.store-preview-sheet>.game-primary{width:100%}
@keyframes storeCardIn{to{opacity:1;transform:none}}

@media (min-width:600px){.inventory-grid,.store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.coin-pack-grid{grid-template-columns:repeat(3,1fr)}.chest-hero{grid-template-columns:100px 1fr auto}.pending-claim{grid-template-columns:auto 1fr minmax(180px,auto);align-items:center}}
@media (min-width:768px){.profile-hero{min-height:470px}.profile-avatar-stage{height:350px}.profile-pixel-avatar{width:330px;height:330px}.avatar-editor-layout{padding-top:26px}.pixel-stage--editor{height:420px}.avatar-controls{padding:8px 0}.gear-category-tabs{flex-wrap:wrap;overflow:visible}.gear-category-tab{flex:1 1 135px}.inventory-grid,.store-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.game-shell{padding-top:28px}.hair-style-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.store-preview-overlay{place-items:center}.store-preview-sheet{border-radius:26px}.store-item-art.item-avatar-preview,.storage-preview{height:175px}.item-avatar-preview canvas{width:155px;height:155px}}
@media (min-width:1180px){.store-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:960px){.avatar-editor-layout{grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr);align-items:start}.pixel-stage--editor{height:520px;position:sticky;top:12px}}
@media (min-width:1100px){.avatar-editor-layout{grid-template-columns:430px minmax(0,1fr)}}
@media (prefers-reduced-motion:reduce){.pixel-stage--editor canvas{transition:none!important;transform:none!important}.gear-category-panel{animation:none!important}}

/* ===== Social: friends, privacy and notifications ===== */
.social-shell,.social-settings-shell,.friend-profile-shell { width:calc(100% - 32px); max-width:920px; margin:0 auto; }
.social-shell { padding:24px 0 42px; }
.social-page-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:12px 0 26px; border-bottom:1px solid var(--border); }
.social-page-heading h1 { margin-top:3px; font-size:34px; line-height:1; letter-spacing:-.045em; }
.social-page-heading p,.social-settings-shell section>p { margin-top:7px; color:var(--text-secondary); font-size:12px; }
.social-settings-link { display:flex; align-items:center; gap:6px; min-height:38px; padding:8px 11px; border-radius:11px; color:#4338ca; background:#eef2ff; font-size:11px; font-weight:800; }
.friend-search { padding:24px 0 18px; border-bottom:1px solid var(--border); }
.friend-search>label { display:block; margin-bottom:8px; font-size:11px; font-weight:800; }
.friend-search>div { height:50px; display:flex; align-items:center; border:1px solid var(--border); border-radius:15px; background:white; overflow:hidden; transition:border-color .18s,box-shadow .18s; }
.friend-search>div:focus-within { border-color:#86efac; box-shadow:0 0 0 3px rgba(34,197,94,.1); }
.friend-search>div>span { padding-left:14px; color:var(--text-muted); font-weight:800; }.friend-search input{min-width:0;flex:1;height:100%;padding:0 8px;font-weight:700;}
.friend-search button { height:38px; display:flex; align-items:center; gap:6px; margin-right:6px; padding:0 14px; border-radius:11px; background:#111827; color:white; font-size:11px; font-weight:800; }
.friend-search__hint { margin-top:6px; color:var(--text-muted); font-size:9px; }
.friend-search-result { padding:20px 0 0; }
.social-section { padding-top:28px; }
.social-section__heading { min-height:34px; display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:7px; }
.social-section__heading h2 { font-size:20px; letter-spacing:-.035em; }.social-section__heading>span{color:var(--text-muted);font-size:11px;font-weight:800;}
.social-list { border-top:1px solid var(--border); }
.social-row { display:flex; align-items:center; gap:12px; min-height:76px; padding:10px 0; border-bottom:1px solid var(--border); opacity:0; transform:translateY(7px); transition:opacity 320ms var(--ease) var(--row-delay),transform 320ms var(--ease) var(--row-delay); }
.social-ready .social-row { opacity:1; transform:none; }
.social-avatar { width:54px; height:54px; flex:none; border-radius:15px; background:linear-gradient(145deg,#ecfdf5,#eef2ff); image-rendering:pixelated; }
.social-row__identity { min-width:0; flex:1; display:flex; flex-direction:column; }.social-row__identity strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.social-row__identity span{margin-top:2px;color:var(--text-muted);font-size:10px;}
.social-row__actions { display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }.social-row__actions button{min-height:34px;padding:7px 10px;border-radius:10px;background:var(--bg-input);font-size:9px;font-weight:800}.social-row__actions button.primary{background:#16a34a;color:white}.social-row__actions button:disabled{opacity:.55}
.social-empty { padding:25px 6px; color:var(--text-muted); font-size:11px; text-align:center; border-bottom:1px solid var(--border); }.social-empty--error{color:#dc2626;}

.social-settings-shell { max-width:760px; padding:24px 0 48px; }.social-settings-shell section{padding:22px 0;border-bottom:1px solid var(--border)}.social-settings-shell h2{margin-top:3px;font-size:23px;letter-spacing:-.035em}
.social-username-field { height:50px; display:flex; align-items:center; margin-top:15px; padding:0 14px; border:1px solid var(--border); border-radius:14px; background:white; font-weight:800; }.social-username-field>span{color:var(--text-muted)}.social-username-field input{flex:1;height:100%;padding-left:4px;font-weight:800;}
.username-status { display:block; margin-top:6px; color:var(--text-muted); font-size:9px; }.username-status.ok{color:#15803d}.username-status.error{color:#dc2626}
.privacy-list,.share-habit-list { margin-top:13px; border-top:1px solid var(--border); }
.privacy-row,.share-habit-row { min-height:68px; display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--border); cursor:pointer; }
.privacy-row>div,.share-habit-row>span:nth-child(2){min-width:0;flex:1;display:flex;flex-direction:column}.privacy-row strong,.share-habit-row strong{font-size:12px}.privacy-row span span,.share-habit-row small{margin-top:2px;color:var(--text-muted);font-size:9px}
.share-habit-row__icon { width:42px;height:42px;display:grid;place-items:center;flex:none;border-radius:12px;font-size:19px; }
.social-save { width:100%; min-height:48px; margin-top:24px; border-radius:14px; background:#111827; color:white; font-size:12px; font-weight:850; box-shadow:0 9px 22px rgba(15,23,42,.15); }.social-save:disabled{opacity:.55}

.friend-profile-shell { padding-bottom:48px; }.friend-profile-hero{min-height:360px;display:grid;align-items:center;justify-items:center;gap:8px;padding:24px 0 30px;background:radial-gradient(circle at 50% 30%,rgba(99,102,241,.13),transparent 48%);border-bottom:1px solid var(--border)}
.friend-profile-avatar{width:230px;height:230px;filter:drop-shadow(0 16px 12px rgba(15,23,42,.16))}.friend-profile-identity{text-align:center}.friend-profile-identity h2{font-size:29px;line-height:1.05;letter-spacing:-.045em}.friend-profile-identity>p{margin-top:3px;color:var(--text-secondary);font-size:12px}.friend-profile-level{margin-top:9px;font-size:11px;font-weight:800}.friend-remove{margin-top:13px;color:#dc2626;font-size:9px;font-weight:800}
.friend-stats-line{display:grid;grid-template-columns:repeat(2,1fr);border-bottom:1px solid var(--border)}.friend-stats-line>div{padding:18px 5px;text-align:center;display:flex;align-items:center;justify-content:center;flex-direction:column}.friend-stats-line svg{color:#16a34a}.friend-stats-line strong{margin-top:5px;font-size:18px}.friend-stats-line span{color:var(--text-muted);font-size:8px}
.friend-detail-section{padding-top:28px}.friend-category-list{border-top:1px solid var(--border)}.friend-category-row{min-height:62px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--border)}.friend-category-row>span{width:40px;height:40px;display:grid;place-items:center;border-radius:12px}.friend-category-row strong{min-width:0;flex:1;font-size:12px}.friend-category-row b{color:#4338ca;font-size:10px}
.friend-shared-habits{border-top:1px solid var(--border)}.shared-habit-row{display:flex;gap:11px;padding:15px 0;border-bottom:1px solid var(--border)}.shared-habit-row__icon{width:44px;height:44px;display:grid;place-items:center;flex:none;border-radius:13px}.shared-habit-row__main{min-width:0;flex:1}.shared-habit-row__main>div{display:flex;align-items:center;justify-content:space-between;gap:10px}.shared-habit-row__main strong{font-size:12px}.shared-habit-row__main>div>span{color:var(--text-muted);font-size:8px}.shared-habit-row__main p{margin-top:3px;color:var(--text-secondary);font-size:9px}.shared-progress{height:5px;margin-top:9px;border-radius:99px;background:#e5e7eb;overflow:hidden}.shared-progress span{display:block;height:100%;border-radius:inherit;background:#22c55e;transition:width 500ms cubic-bezier(.22,1,.36,1)}.shared-habit-row__main small{display:block;margin-top:4px;color:var(--text-muted);font-size:8px}

.notification-center { position:relative; z-index:260; }
.notification-bell { position:relative; z-index:2; width:40px;height:40px;display:grid;place-items:center;border-radius:11px;background:transparent;border:0;box-shadow:none;color:var(--text-secondary);transition:transform .16s var(--ease),background .16s var(--ease),color .16s var(--ease) }.notification-bell:hover{background:var(--bg-input);color:var(--text-primary)}.notification-bell:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}.notification-bell:active{transform:scale(.94)}.notification-bell>span{position:absolute;top:1px;right:1px;min-width:17px;height:17px;padding:0 4px;display:grid;place-items:center;border-radius:99px;background:#ef4444;color:white;font-size:8px;font-weight:900;box-shadow:0 0 0 2px white}.notification-bell>span[hidden]{display:none}
.notification-scrim{position:fixed;inset:0;z-index:0;border:0;background:rgba(15,23,42,.3);backdrop-filter:blur(2px)}.notification-panel{position:fixed;z-index:1;right:0;bottom:0;left:0;max-height:min(78dvh,620px);padding:20px 18px calc(18px + var(--safe-bottom));border-radius:24px 24px 0 0;background:white;box-shadow:0 -20px 60px rgba(15,23,42,.18);transform:translateY(16px);opacity:0;transition:transform 240ms cubic-bezier(.22,1,.36,1),opacity 180ms}.notification-panel.ready{transform:none;opacity:1}.notification-panel__head{display:flex;align-items:center;justify-content:space-between;padding-bottom:12px;border-bottom:1px solid var(--border)}.notification-panel__head h2{font-size:22px;letter-spacing:-.035em}.notification-close{width:36px;height:36px;display:grid;place-items:center;border-radius:11px;background:var(--bg-input)}.notification-items{overflow:auto;max-height:48dvh}.notification-row{display:flex;gap:10px;padding:13px 0;border-bottom:1px solid var(--border)}.social-avatar--notification{width:48px;height:48px;border-radius:13px}.notification-row__body{min-width:0;flex:1}.notification-row__body strong{display:block;font-size:12px}.notification-row__body>span{display:block;margin-top:2px;color:var(--text-secondary);font-size:9px}.notification-row__body>div{display:flex;gap:5px;margin-top:8px}.notification-row__body button{height:31px;padding:0 10px;border-radius:9px;background:#16a34a;color:white;font-size:9px;font-weight:800}.notification-row__body button+button{background:var(--bg-input);color:var(--text-secondary)}.notification-empty{min-height:170px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--text-muted);font-size:10px}.notification-all{width:100%;height:40px;margin-top:10px;border-radius:11px;background:#111827;color:white;font-size:10px;font-weight:800}

@media(min-width:600px){.friend-stats-line{grid-template-columns:repeat(4,1fr)}}
@media(min-width:768px){.social-shell{padding-top:38px}.friend-profile-hero{min-height:390px;grid-template-columns:300px minmax(280px,420px);justify-content:center;text-align:left}.friend-profile-identity{text-align:left}.friend-profile-avatar{width:300px;height:300px}.notification-scrim{background:transparent;backdrop-filter:none}.notification-panel{top:calc(var(--app-top-bar-h) + 8px);right:var(--app-top-bar-gutter);bottom:auto;left:auto;width:370px;max-height:560px;padding:18px;border-radius:20px;box-shadow:0 18px 55px rgba(15,23,42,.2);transform:translateY(-8px) scale(.98);transform-origin:top right}.notification-panel.ready{transform:none}.notification-items{max-height:390px}}
@media(min-width:1024px){.social-shell,.friend-profile-shell{max-width:960px}}
@media(prefers-reduced-motion:reduce){.social-row,.notification-panel,.shared-progress span{transition:none!important;opacity:1;transform:none}}

/* ===== Experimental Annual Goals ===== */
.home-goals-section { padding-top:8px; }
.experimental-tag { display:inline-flex;align-items:center;width:max-content;padding:3px 7px;border-radius:99px;background:#eef2ff;color:#4f46e5;font-size:7px;font-weight:850;letter-spacing:.05em;text-transform:uppercase;vertical-align:middle; }
.more-row .experimental-tag { display:inline-flex;margin-left:6px;font-size:6px; }
.goals-view-header { border-bottom:1px solid rgba(226,232,240,.9);background:rgba(244,244,245,.88); }
.goals-view-header__inner { width:100%;display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:22px 20px 18px; }
.goals-title-line { display:flex;align-items:center;gap:9px; }
.goals-title-line h1 { font-size:25px;line-height:1;letter-spacing:-.035em; }
.goals-title-line>span { padding:3px 7px;border-radius:99px;background:#eef2ff;color:#4f46e5;font-size:7px;font-weight:850;letter-spacing:.05em;text-transform:uppercase; }
.goals-view-header__inner>div>p { margin-top:6px;color:var(--text-secondary);font-size:10px; }
.goals-toolbar { display:flex;align-items:center;gap:9px; }
.goal-year-select { position:relative;min-width:92px;height:44px;display:grid;align-items:center;padding:0 36px 0 12px;border:1px solid var(--border);border-radius:12px;background:white; }
.goal-year-select>span { position:absolute;top:4px;left:12px;color:var(--text-muted);font-size:7px;font-weight:800;text-transform:uppercase; }
.goal-year-select select { width:100%;padding-top:8px;appearance:none;font-size:12px;font-weight:800;outline:0; }
.goal-year-select svg { position:absolute;top:50%;right:11px;transform:translateY(-50%);color:var(--text-muted);pointer-events:none; }
.goals-new-button { min-height:44px;display:none;align-items:center;gap:7px;padding:0 15px;border-radius:12px;background:#111827;color:white;font-size:11px;font-weight:800; }
.goals-list-shell { width:calc(100% - 40px);margin:0 auto;padding:22px 0 calc(var(--nav-h) + 48px); }
.goal-list-loading,.goal-list-error { min-height:230px;display:grid;place-content:center;justify-items:center;gap:9px;color:var(--text-muted);font-size:11px;text-align:center; }
.goal-list-error button { min-height:38px;padding:0 14px;border-radius:10px;background:white;border:1px solid var(--border);font-size:10px;font-weight:800; }
.goals-list-group+.goals-list-group { margin-top:30px; }
.goals-list-group__heading { min-height:42px;display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:10px; }
.goals-list-group__heading h2 { font-size:18px;letter-spacing:-.025em; }
.goals-list-group__heading p { margin-top:2px;color:var(--text-muted);font-size:9px; }
.goals-list-group__heading>span { min-width:26px;height:26px;display:grid;place-items:center;border-radius:99px;background:#e5e7eb;color:var(--text-secondary);font-size:9px;font-weight:800; }
.goals-empty-page { min-height:430px;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:40px 20px; }
.goals-empty-page>span { width:68px;height:68px;display:grid;place-items:center;border-radius:20px;background:#eef2ff;color:#6366f1; }
.goals-empty-page h2 { margin-top:18px;font-size:22px;letter-spacing:-.035em; }
.goals-empty-page p { max-width:320px;margin-top:6px;color:var(--text-secondary);font-size:11px; }
.goals-empty-page button { min-height:44px;margin-top:19px;padding:0 18px;border-radius:12px;background:#111827;color:white;font-size:11px;font-weight:800; }
.goals-fab { background:#6366f1; }

.goal-loading { min-height:70dvh;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:var(--text-muted);font-size:11px; }
.goal-loading .btn { width:auto;min-width:150px; }
.goal-form-view { padding-bottom:24px; }
.goal-form-body { width:calc(100% - 40px);max-width:720px;margin:0 auto;padding:26px 0 calc(var(--nav-clearance) + 16px); }
.goal-form-intro { margin-bottom:25px;opacity:0;transform:translateY(6px);transition:opacity 320ms var(--ease),transform 320ms var(--ease); }
.goal-form-ready .goal-form-intro { opacity:1;transform:none; }
.goal-form-intro h1 { max-width:560px;margin-top:8px;font-size:26px;line-height:1.05;letter-spacing:-.045em; }
.goal-form-intro p { margin-top:7px;color:var(--text-secondary);font-size:11px; }
.goal-form-identity { display:grid;grid-template-columns:58px minmax(0,1fr);align-items:end;gap:12px;margin-bottom:20px; }
.goal-icon-button { width:58px;height:58px;border-radius:16px; }
.goal-text-field { min-width:0;display:grid;gap:6px; }
.goal-text-field>span,.goal-form-body>.form-label { color:var(--text-secondary);font-size:9px;font-weight:800;letter-spacing:.025em;text-transform:uppercase; }
.goal-text-field input { width:100%;height:50px;padding:0 13px;border:1px solid var(--border);border-radius:13px;background:white;font-size:12px;font-weight:700;outline:0;transition:border-color .16s,box-shadow .16s; }
.goal-text-field input:focus { border-color:#818cf8;box-shadow:0 0 0 3px rgba(99,102,241,.11); }
.goal-text-field input.invalid { border-color:#ef4444;box-shadow:0 0 0 3px rgba(239,68,68,.09); }
.goal-year-field { margin-top:7px; }
.goal-year-field select { width:100%;height:100%;padding:0 42px 0 14px;appearance:none;font-size:13px;font-weight:750;outline:0; }
.goal-year-field:has(select:disabled) { opacity:.62; }
.goal-field-hint { margin-top:6px;color:var(--text-muted);font-size:8px; }
.goal-color-label { margin-top:20px; }
.goal-color-grid { margin-top:9px; }
.goal-color-grid .color-swatch { width:32px;height:32px; }
.goal-results-editor { margin-top:34px;padding-top:25px;border-top:1px solid var(--border); }
.goal-results-editor__heading { display:flex;align-items:flex-end;justify-content:space-between;gap:14px;margin-bottom:14px; }
.goal-results-editor__heading h2 { margin-top:3px;font-size:21px;letter-spacing:-.035em; }
.goal-results-editor__heading p { margin-top:4px;color:var(--text-secondary);font-size:9px; }
.goal-results-count { color:#4f46e5;font-size:10px;font-weight:850; }
.goal-results-list { display:grid;gap:10px; }
.goal-result-editor { padding:15px;border:1px solid var(--border);border-radius:16px;background:rgba(255,255,255,.78);opacity:0;transform:translateY(6px);animation:goalResultIn 320ms cubic-bezier(.22,1,.36,1) var(--result-delay) forwards; }
.goal-result-editor__top { height:24px;display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:6px; }
.goal-result-editor__top>span { color:#6366f1;font-size:9px;font-weight:900;letter-spacing:.08em; }
.goal-result-editor__top button { width:28px;height:28px;display:grid;place-items:center;margin-top:-5px;margin-right:-5px;border-radius:9px;color:var(--text-muted); }
.goal-result-editor__top button:hover { background:#fee2e2;color:#dc2626; }
.goal-result-editor__numbers { display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;margin-top:11px; }
.goal-result-editor__progress { margin-top:9px;color:#4f46e5;font-size:8px;font-weight:750; }
.goal-add-result { width:100%;min-height:46px;display:flex;align-items:center;justify-content:center;gap:7px;margin-top:11px;border:1px dashed #c7cdd6;border-radius:13px;color:#4f46e5;font-size:10px;font-weight:800; }
.goal-add-result:hover:not(:disabled) { border-color:#818cf8;background:#eef2ff; }
.goal-add-result:disabled { opacity:.4;cursor:not-allowed; }
.goal-submit { min-height:50px;margin-top:24px;border-radius:14px;background:#111827;color:white;font-size:12px;font-weight:850; }
@keyframes goalResultIn { to { opacity:1;transform:none; } }

.goal-detail-view { --goal-color:#6366f1;padding-bottom:calc(var(--nav-clearance) + 20px); }
.goal-detail-hero,.goal-detail-results,.goal-detail-manage { width:calc(100% - 40px);max-width:820px;margin:0 auto; }
.goal-detail-hero { padding:26px 0 24px;border-bottom:1px solid var(--border); }
.goal-detail-identity { display:flex;align-items:center;gap:13px;opacity:0;transform:translateY(6px);transition:opacity 350ms var(--ease),transform 350ms var(--ease); }
.goal-detail-ready .goal-detail-identity { opacity:1;transform:none; }
.goal-detail-icon { width:58px;height:58px;display:grid;place-items:center;flex:none;border-radius:17px;font-size:28px; }
.goal-detail-identity h1 { max-width:620px;margin-top:4px;font-size:25px;line-height:1.08;letter-spacing:-.04em; }
.goal-status { display:inline-flex;margin-top:7px;padding:3px 7px;border-radius:99px;background:#e5e7eb;color:var(--text-secondary);font-size:7px;font-weight:850;text-transform:uppercase;letter-spacing:.05em; }
.goal-status--active { background:#eef2ff;color:#4f46e5; }.goal-status--achieved{background:#dcfce7;color:#15803d}.goal-status--future{background:#e0f2fe;color:#0369a1}.goal-status--closed,.goal-status--archived{background:#f3f4f6;color:#6b7280}
.goal-overall-progress { margin-top:27px; }
.goal-overall-progress__number { display:flex;align-items:baseline;justify-content:space-between;gap:12px; }
.goal-overall-progress__number strong { color:var(--goal-color);font-size:45px;line-height:1;letter-spacing:-.06em;font-variant-numeric:tabular-nums; }
.goal-overall-progress__number span { color:var(--text-muted);font-size:9px;font-weight:750;text-transform:uppercase;letter-spacing:.08em; }
.goal-overall-progress__track { height:10px;margin-top:12px;overflow:hidden;border-radius:99px;background:#e5e7eb; }
.goal-overall-progress__track>span { display:block;height:100%;border-radius:inherit;background:var(--goal-color);transition:width 520ms cubic-bezier(.22,1,.36,1); }
.goal-overall-progress>p { margin-top:7px;color:var(--text-secondary);font-size:10px; }
.goal-achievement-banner { display:flex;align-items:center;gap:10px;margin-top:19px;padding:13px 14px;border-radius:14px;background:#ecfdf5;color:#15803d; }
.goal-achievement-banner>div { display:grid; }.goal-achievement-banner strong{font-size:11px}.goal-achievement-banner span{margin-top:2px;font-size:8px;color:#16a34a}.goal-achievement-banner--fresh{animation:goalAchievementIn 520ms cubic-bezier(.22,1,.36,1)}
@keyframes goalAchievementIn { 0%{opacity:0;transform:translateY(8px) scale(.98)} 65%{transform:translateY(-2px) scale(1.01)} 100%{opacity:1;transform:none} }
.goal-detail-lock-note { margin-top:17px;padding:11px 13px;border-radius:12px;background:#f3f4f6;color:var(--text-secondary);font-size:9px; }
.goal-detail-results { padding:27px 0; }
.goal-detail-section-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:13px; }
.goal-detail-section-heading h2 { margin-top:3px;font-size:21px;letter-spacing:-.035em; }
.goal-detail-section-heading p { color:var(--text-muted);font-size:8px; }
.goal-detail-results-list { display:grid;gap:9px; }
.goal-key-result { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:13px;padding:16px;border:1px solid var(--border);border-radius:16px;background:white;opacity:0;transform:translateY(7px);animation:goalResultIn 360ms cubic-bezier(.22,1,.36,1) var(--result-delay) forwards; }
.goal-key-result--complete { border-color:color-mix(in srgb,var(--goal-color) 28%,var(--border)); }
.goal-key-result--pulse { animation:goalResultIn 260ms cubic-bezier(.22,1,.36,1),goalResultPulse 380ms cubic-bezier(.22,1,.36,1) 260ms; }
@keyframes goalResultPulse { 45%{transform:scale(1.012);box-shadow:0 8px 24px rgba(99,102,241,.12)} }
.goal-key-result__copy { min-width:0; }
.goal-key-result__heading { display:flex;align-items:center;justify-content:space-between;gap:12px; }
.goal-key-result__heading h3 { min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.goal-key-result__heading strong { flex:none;color:var(--goal-color);font-size:10px;font-variant-numeric:tabular-nums; }
.goal-key-result__track { height:6px;margin-top:10px;overflow:hidden;border-radius:99px;background:#e5e7eb; }
.goal-key-result__track>span { display:block;height:100%;border-radius:inherit;background:var(--goal-color);transition:width 480ms cubic-bezier(.22,1,.36,1); }
.goal-key-result__meta { display:flex;justify-content:space-between;gap:10px;margin-top:6px;color:var(--text-muted);font-size:8px; }
.goal-key-result__actions { display:flex;align-items:center;gap:5px; }
.goal-key-result__actions button { width:38px;height:38px;display:grid;place-items:center;border-radius:11px;transition:transform .16s,background .16s; }
.goal-key-result__actions button:active:not(:disabled) { transform:scale(.93); }
.goal-key-result__actions button:disabled { opacity:.35;cursor:not-allowed; }
.goal-progress-minus { background:var(--bg-input);color:var(--text-secondary);font-size:21px;font-weight:500; }
.goal-progress-plus { background:var(--goal-color);color:white; }
.goal-detail-manage { padding:8px 0 28px;border-top:1px solid var(--border); }
.goal-detail-manage>.eyebrow { display:block;margin:15px 0 4px; }
.goal-detail-manage .manage-row { min-height:48px;padding:10px 2px; }

@media(min-width:768px){
  .home-goals-section { padding-top:10px; }
  .goals-view-header__inner,.goals-list-shell { max-width:var(--content-max-w); }
  .goals-view-header__inner { margin:0 auto;padding:28px 32px 21px; }
  .goals-list-shell { width:100%;padding:27px 32px 50px; }
  .goal-card-list:not(.goal-card-list--home) { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .goal-form-body { width:100%;padding:34px 32px 50px; }
  .goal-form-intro h1 { font-size:32px; }
  .goal-detail-hero,.goal-detail-results,.goal-detail-manage { width:100%;padding-right:32px;padding-left:32px; }
  .goal-detail-hero { padding-top:34px; }
  .goal-detail-identity h1 { font-size:31px; }
}
@media(min-width:1024px){.goals-new-button{display:flex}.goals-fab{display:none!important}.goals-list-shell{padding-bottom:60px}.goal-detail-view{padding-bottom:35px}}
@media(min-width:1280px){.goals-view-header__inner,.goals-list-shell{padding-right:40px;padding-left:40px}}
@media(max-width:440px){.goals-view-header__inner{align-items:center}.goals-view-header__inner>div>p{display:none}.goal-card{grid-template-columns:44px minmax(0,1fr) auto;padding:13px}.goal-card__icon{width:44px;height:44px}.goal-card__heading small{display:none}.goal-result-editor__numbers{grid-template-columns:94px minmax(0,1fr)}.goal-detail-section-heading p{display:none}.goal-key-result{grid-template-columns:1fr}.goal-key-result__actions{justify-content:flex-end}.goal-key-result__meta{flex-direction:column;gap:2px}}
@media(prefers-reduced-motion:reduce){.goal-card,.goal-result-editor,.goal-key-result,.goal-detail-identity,.goal-achievement-banner{animation:none!important;transition:none!important;opacity:1;transform:none}.goal-card__progress>span,.goal-overall-progress__track>span,.goal-key-result__track>span{transition:none}}