:root {
  --bb-bg: #fff8ef;
  --bb-surface: #ffffff;
  --bb-surface-soft: #fff3e4;
  --bb-line: #ead7c1;
  --bb-text: #19140f;
  --bb-muted: #74675b;
  --bb-orange: #ff8708;
  --bb-orange-deep: #f26200;
  --bb-green: #06c755;
  --bb-shadow: 0 14px 34px rgba(120, 67, 16, 0.12);
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

body {
  background:
    radial-gradient(circle at 12% 7%, rgba(6, 199, 85, 0.08), transparent 26rem),
    radial-gradient(circle at 92% 1%, rgba(255, 135, 8, 0.16), transparent 24rem),
    var(--bb-bg) !important;
  color: var(--bb-text) !important;
  font-family: "Be Vietnam Pro", "Noto Sans Thai", system-ui, sans-serif !important;
}

.phone-app {
  width: min(100%, 430px) !important;
  max-width: 430px !important;
  min-height: 100dvh;
  margin: 0 auto !important;
  padding: 14px 16px 112px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  overflow: visible !important;
}

.boss-marquee,
.section-header {
  display: none !important;
}

.app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  display: grid !important;
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  min-height: 64px !important;
  margin: -14px -16px 12px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 16px 10px !important;
  background: rgba(255, 248, 239, 0.94) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(234, 215, 193, 0.86) !important;
  box-shadow: 0 8px 22px rgba(74, 42, 12, 0.08) !important;
  backdrop-filter: blur(18px);
}

.menu-button,
.round-button,
.profile-dot {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 15px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: 0 8px 18px rgba(74, 42, 12, 0.08) !important;
  color: var(--bb-text) !important;
  transform: none !important;
}

.menu-button .menu-label {
  display: none !important;
}

.menu-button .material-symbols-outlined,
.round-button .material-symbols-outlined {
  font-size: 24px !important;
}

.brand-lockup {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 9px !important;
}

.brand-mark {
  width: 36px !important;
  height: 36px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  background: #fff !important;
  border: 2px solid #fff !important;
  box-shadow: 0 7px 14px rgba(255, 135, 8, 0.2) !important;
}

.brand-logo-art {
  display: none !important;
}

.brand-text {
  min-width: 0 !important;
}

.app-header .eyebrow {
  display: none !important;
}

.app-header h1 {
  margin: 0 !important;
  font-size: 27px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
  color: var(--bb-text) !important;
  text-shadow: none !important;
  transform: none !important;
}

.app-header h1 span {
  color: var(--bb-orange) !important;
}

.app-header .tagline {
  margin: 3px 0 0 !important;
  max-width: 200px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  color: var(--bb-muted) !important;
  font-size: 11px !important;
  line-height: 1.3 !important;
}

.header-actions {
  display: flex !important;
  gap: 8px !important;
}

.profile-dot {
  font-size: 0 !important;
}

.profile-dot::before {
  content: "👤";
  font-size: 18px;
}

.line-status-card {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 4px 0 14px !important;
  padding: 10px 12px !important;
  border: 1px solid rgba(6, 199, 85, 0.32) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #efffed 0%, #fafff7 100%) !important;
  color: #11351e !important;
  box-shadow: 0 10px 24px rgba(6, 199, 85, 0.1) !important;
}

.line-status-card::before {
  content: "LINE";
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--bb-green);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.line-status-card strong {
  font-size: 14px !important;
  line-height: 1.25 !important;
}

.line-status-card p {
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  color: #36724a !important;
}

.status-action-button {
  margin-left: auto !important;
  border: 0 !important;
  border-radius: 13px !important;
  padding: 9px 12px !important;
  background: var(--bb-orange) !important;
  color: #fff !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

.daily-coach-screen,
.reminder-home-screen,
.my-tasks-screen,
.projects-screen,
.project-detail-screen,
.line-settings-screen,
.profile-screen,
.create-task-page,
.task-detail-screen {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.daily-coach-hero,
.daily-budget-card,
.daily-recommend-card,
.daily-list-card,
.daily-line-guide,
.reminder-command-card,
.reminder-today-panel,
.reminder-list-section,
.reminder-line-card,
.project-neo-card,
.mission-summary-card,
.create-task-page,
.line-settings-panel,
.profile-card,
.task-detail-card {
  width: 100% !important;
  min-width: 0 !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  box-shadow: var(--bb-shadow) !important;
  color: var(--bb-text) !important;
  transform: none !important;
}

.daily-coach-hero {
  position: relative !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 112px !important;
  align-items: center !important;
  padding: 18px !important;
  overflow: hidden !important;
  background: linear-gradient(135deg, #fff 0%, #fff0dc 100%) !important;
}

.daily-coach-hero::after {
  content: "";
  position: absolute;
  right: -40px;
  bottom: -55px;
  width: 160px;
  height: 160px;
  border-radius: 999px;
  background: rgba(255, 135, 8, 0.12);
}

.daily-coach-hero img {
  position: relative !important;
  z-index: 1 !important;
  width: 118px !important;
  height: 118px !important;
  object-fit: contain !important;
  filter: drop-shadow(0 12px 18px rgba(120, 67, 16, 0.16)) !important;
}

.daily-chip {
  display: inline-flex !important;
  width: fit-content !important;
  margin-bottom: 8px !important;
  padding: 5px 9px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #e8fff0 !important;
  color: #079440 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.daily-coach-hero h2,
.daily-budget-head h3,
.section-title-row h2 {
  margin: 0 !important;
  color: var(--bb-text) !important;
  letter-spacing: 0 !important;
}

.daily-coach-hero h2 {
  font-size: 24px !important;
  line-height: 1.18 !important;
  font-weight: 900 !important;
}

.daily-coach-hero p {
  margin: 8px 0 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--bb-muted) !important;
}

.daily-budget-card {
  padding: 18px !important;
}

.daily-budget-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 16px !important;
}

.daily-budget-head span {
  display: block !important;
  margin-bottom: 3px !important;
  color: var(--bb-muted) !important;
  font-size: 12px !important;
}

.daily-budget-head h3 {
  font-size: 30px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
}

.daily-budget-head > strong {
  display: grid !important;
  place-items: center !important;
  width: 64px !important;
  height: 64px !important;
  border-radius: 999px !important;
  background: conic-gradient(var(--bb-orange) var(--daily-progress, 38%), #f1e6d9 0) !important;
  color: var(--bb-text) !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  box-shadow: inset 0 0 0 9px #fff !important;
}

.daily-progress-track {
  height: 10px !important;
  margin: 16px 0 !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f1e6d9 !important;
  overflow: hidden !important;
}

.daily-progress-track span {
  display: block !important;
  height: 100% !important;
  border: 0 !important;
  border-radius: inherit !important;
  background: linear-gradient(90deg, var(--bb-orange), #ffb238) !important;
}

.daily-metrics {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.daily-metrics div {
  min-width: 0 !important;
  padding: 10px !important;
  border-radius: 16px !important;
  background: #fff6eb !important;
  border: 1px solid rgba(234, 215, 193, 0.8) !important;
  text-align: center !important;
}

.daily-metrics span {
  display: block !important;
  font-size: 11px !important;
  color: var(--bb-muted) !important;
}

.daily-metrics strong {
  display: block !important;
  margin-top: 2px !important;
  font-size: 21px !important;
  color: var(--bb-orange-deep) !important;
}

.daily-recommend-card,
.daily-list-card {
  padding: 14px !important;
}

.section-title-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.section-title-row h2 {
  font-size: 18px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.section-title-row h2::before {
  content: "★";
  margin-right: 6px;
  color: var(--bb-orange);
}

.view-all-link {
  flex: 0 0 auto !important;
  padding: 8px 11px !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 999px !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 800 !important;
}

.daily-next-task {
  display: grid !important;
  grid-template-columns: 52px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: start !important;
  padding: 12px !important;
  border: 1px solid rgba(234, 215, 193, 0.88) !important;
  border-radius: 20px !important;
  background: linear-gradient(135deg, #fff 0%, #fff8ef 100%) !important;
  box-shadow: none !important;
}

.daily-task-icon {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #eaf9ff !important;
  box-shadow: none !important;
  font-size: 24px !important;
}

.daily-task-content {
  min-width: 0 !important;
}

.daily-task-content span,
.daily-row-main span {
  color: var(--bb-muted) !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}

.daily-task-content h3 {
  margin: 2px 0 5px !important;
  color: var(--bb-text) !important;
  font-size: 18px !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  overflow-wrap: anywhere !important;
}

.daily-task-content p {
  margin: 0 !important;
  color: var(--bb-muted) !important;
  font-size: 12px !important;
}

.daily-next-actions {
  grid-column: 1 / -1 !important;
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.daily-next-actions button,
.daily-empty-state button,
.daily-line-guide button {
  min-height: 42px !important;
  border: 0 !important;
  border-radius: 14px !important;
  background: var(--bb-orange) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

.daily-next-actions button:first-child {
  background: #fff4e8 !important;
  color: var(--bb-orange-deep) !important;
  border: 1px solid rgba(255, 135, 8, 0.2) !important;
}

.daily-task-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.daily-task-row {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 11px !important;
  border: 1px solid rgba(234, 215, 193, 0.88) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.daily-check {
  width: 34px !important;
  height: 34px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #dff8e7 !important;
  color: #11a84b !important;
  box-shadow: none !important;
  font-weight: 900 !important;
}

.daily-row-main {
  min-width: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: left !important;
  color: var(--bb-text) !important;
}

.daily-row-main strong {
  display: block !important;
  color: var(--bb-text) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere !important;
}

.daily-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 44px !important;
  padding: 7px 10px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff4df !important;
  color: #a55300 !important;
  box-shadow: none !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.daily-task-row .daily-pill.status {
  display: none !important;
}

.daily-empty-row,
.daily-empty-state {
  padding: 16px !important;
  border: 1px dashed rgba(255, 135, 8, 0.35) !important;
  border-radius: 18px !important;
  background: #fffaf4 !important;
  color: var(--bb-muted) !important;
  box-shadow: none !important;
}

.daily-line-guide {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #ecffef 0%, #fbfff7 100%) !important;
  border-color: rgba(6, 199, 85, 0.28) !important;
}

.line-bubble {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: var(--bb-green) !important;
  color: #fff !important;
  box-shadow: none !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.daily-line-guide strong {
  display: block !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.daily-line-guide p {
  margin: 4px 0 0 !important;
  color: #3e6d4b !important;
  font-size: 12px !important;
  line-height: 1.4 !important;
}

.daily-line-guide button {
  grid-column: 1 / -1 !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  border: 1px solid rgba(6, 199, 85, 0.2) !important;
}

.bottom-nav {
  position: fixed !important;
  left: 50% !important;
  right: auto !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
  transform: translateX(-50%) !important;
  z-index: 50 !important;
  width: min(calc(100% - 26px), 430px) !important;
  height: 68px !important;
  display: grid !important;
  grid-template-columns: repeat(5, 1fr) !important;
  align-items: center !important;
  gap: 2px !important;
  padding: 8px !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 16px 42px rgba(74, 42, 12, 0.18) !important;
  backdrop-filter: blur(18px);
}

.bottom-nav button {
  min-width: 0 !important;
  height: 52px !important;
  padding: 5px 3px !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: transparent !important;
  color: #8d8177 !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  line-height: 1.1 !important;
}

.bottom-nav button span,
.bottom-nav .material-symbols-outlined {
  display: block !important;
  margin: 0 auto 2px !important;
  font-size: 21px !important;
  line-height: 1 !important;
}

.bottom-nav button.active {
  background: #fff3e4 !important;
  color: var(--bb-orange-deep) !important;
}

.bottom-nav button:nth-child(3) {
  position: relative !important;
  margin-top: -28px !important;
  height: 62px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #ff9a24, #ff7800) !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(255, 120, 0, 0.32) !important;
}

.bottom-nav button:nth-child(3) span {
  font-size: 28px !important;
}

.toast {
  bottom: 92px !important;
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 36px), 390px) !important;
  border: 0 !important;
  border-radius: 16px !important;
  background: #112318 !important;
  color: #fff !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.18) !important;
}

@media (max-width: 390px) {
  .phone-app {
    padding-inline: 12px !important;
  }

  .app-header {
    margin-inline: -12px !important;
    padding-inline: 12px !important;
  }

  .daily-coach-hero {
    grid-template-columns: minmax(0, 1fr) 86px !important;
    padding: 15px !important;
  }

  .daily-coach-hero img {
    width: 92px !important;
    height: 92px !important;
  }

  .daily-coach-hero h2 {
    font-size: 21px !important;
  }

  .daily-task-row {
    grid-template-columns: 34px minmax(0, 1fr) auto !important;
  }

  .daily-pill {
    min-width: 38px !important;
    padding-inline: 8px !important;
  }
}

/* LIFF polish pass: forms, dialogs, projects, and LINE settings */
body .app-header .brand-logo-art,
body .brand-logo-art {
  display: none !important;
  visibility: hidden !important;
  max-width: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
}

body .brand-lockup {
  overflow: hidden !important;
}

body .brand-text,
body .brand-text h1,
body .brand-text .tagline {
  min-width: 0 !important;
}

body[data-view="create"] .phone-app,
body[data-view="project-create"] .phone-app,
body[data-view="settings"] .phone-app,
body[data-view="profile"] .phone-app,
body[data-view="task-detail"] .phone-app {
  padding-bottom: 128px !important;
}

body[data-view="create"] .line-status-card,
body[data-view="project-create"] .line-status-card,
body[data-view="settings"] .section-header,
body[data-view="project-create"] .section-header,
body[data-view="create"] .section-header {
  display: none !important;
}

.create-task-page,
.project-create-screen,
.settings-screen,
.profile-screen,
.task-detail-screen {
  padding: 16px !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: var(--bb-shadow) !important;
  overflow: hidden !important;
}

.create-task-page::after,
.create-task-page::before,
.project-create-screen::after,
.project-create-screen::before {
  display: none !important;
  content: none !important;
}

.create-task-page > *,
.project-create-screen > *,
.settings-screen > *,
.task-detail-screen > * {
  position: relative !important;
  z-index: 1 !important;
}

.create-task-page label,
.project-field,
.settings-form label {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  min-width: 0 !important;
  margin: 0 0 14px !important;
  color: var(--bb-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

.create-task-page input,
.create-task-page textarea,
.create-task-page select,
.project-field input,
.project-field textarea,
.settings-form input[type="time"],
.settings-form input[type="number"],
.settings-form select,
.task-dialog input,
.task-dialog textarea,
.task-dialog select {
  width: 100% !important;
  min-width: 0 !important;
  min-height: 50px !important;
  height: auto !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  box-shadow: none !important;
  outline: none !important;
  transform: none !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  text-align: left !important;
  appearance: auto !important;
}

.create-task-page input[type="date"],
.create-task-page input[type="time"],
.project-field input[type="date"],
.settings-form input[type="time"],
.task-dialog input[type="date"],
.task-dialog input[type="time"] {
  text-align: left !important;
  font-size: 16px !important;
  letter-spacing: 0 !important;
}

.create-task-page input:focus,
.create-task-page textarea:focus,
.create-task-page select:focus,
.project-field input:focus,
.project-field textarea:focus,
.task-dialog input:focus,
.task-dialog textarea:focus,
.task-dialog select:focus {
  border-color: rgba(255, 135, 8, 0.75) !important;
  box-shadow: 0 0 0 4px rgba(255, 135, 8, 0.12) !important;
}

.create-task-page textarea,
.project-field textarea,
.task-dialog textarea {
  min-height: 112px !important;
  resize: vertical !important;
}

.form-row,
.project-date-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  min-width: 0 !important;
}

.form-actions-row,
.dialog-actions-row,
.project-create-actions {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.create-submit-button,
.save-button,
.project-create-confirm,
.project-create-back,
.danger-outline-button {
  width: 100% !important;
  min-height: 52px !important;
  padding: 13px 16px !important;
  border: 0 !important;
  border-radius: 17px !important;
  box-shadow: none !important;
  transform: none !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  line-height: 1.2 !important;
}

.create-submit-button,
.save-button,
.project-create-confirm {
  background: linear-gradient(180deg, #ff9630, var(--bb-orange-deep)) !important;
  color: #fff !important;
}

.project-create-back,
.danger-outline-button {
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  background: #fff !important;
  color: #9b2525 !important;
}

.task-dialog {
  width: min(calc(100vw - 28px), 430px) !important;
  max-width: 430px !important;
  max-height: min(82dvh, 760px) !important;
  margin: auto !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 28px !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28) !important;
  overflow: hidden !important;
}

.task-dialog::backdrop {
  background: rgba(25, 20, 15, 0.42) !important;
  backdrop-filter: blur(3px);
}

.task-dialog form {
  max-height: min(82dvh, 760px) !important;
  overflow-y: auto !important;
  padding: 22px 18px calc(env(safe-area-inset-bottom, 0px) + 22px) !important;
}

.dialog-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: -22px -18px 16px !important;
  padding: 18px !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border-bottom: 1px solid rgba(234, 215, 193, 0.75) !important;
}

.dialog-header h2 {
  margin: 0 !important;
  font-size: 22px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

#closeDialogButton,
.dialog-header .round-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 15px !important;
  background: #fff7ee !important;
  color: var(--bb-text) !important;
  box-shadow: none !important;
  outline: none !important;
  font-size: 28px !important;
  line-height: 1 !important;
}

#closeDialogButton:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 135, 8, 0.14) !important;
}

.dialog-actions-row {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 4 !important;
  margin: 18px -18px -22px !important;
  padding: 12px 18px calc(env(safe-area-inset-bottom, 0px) + 14px) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.82), #fff 32%) !important;
  border-top: 1px solid rgba(234, 215, 193, 0.75) !important;
}

.project-create-hero-panel {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 78px !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 16px !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 22px !important;
  background: linear-gradient(135deg, #fff8ef, #fff) !important;
  box-shadow: none !important;
}

.project-create-hero-panel h2 {
  margin: 0 !important;
  font-size: 21px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.project-create-hero-panel p {
  margin: 5px 0 0 !important;
  color: var(--bb-muted) !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

.project-create-avatar {
  width: 76px !important;
  height: 76px !important;
  object-fit: contain !important;
  border: 0 !important;
  border-radius: 18px !important;
  background: #fff1df !important;
}

.project-picker-block {
  min-width: 0 !important;
  margin: 0 0 16px !important;
}

.project-picker-block h3 {
  margin: 0 0 10px !important;
  font-size: 15px !important;
  font-weight: 900 !important;
}

.project-icon-picker,
.project-color-picker {
  display: flex !important;
  gap: 10px !important;
  overflow-x: auto !important;
  overscroll-behavior-x: contain !important;
  scroll-snap-type: x proximity !important;
  padding: 2px 4px 10px !important;
  margin-inline: -4px !important;
  scrollbar-width: none !important;
}

.project-icon-picker::-webkit-scrollbar,
.project-color-picker::-webkit-scrollbar {
  display: none !important;
}

.project-icon-choice {
  flex: 0 0 56px !important;
  width: 56px !important;
  height: 56px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 17px !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  box-shadow: none !important;
  transform: none !important;
  scroll-snap-align: start !important;
}

.project-icon-choice.active {
  background: #fff3e4 !important;
  border-color: rgba(255, 135, 8, 0.7) !important;
  color: var(--bb-orange-deep) !important;
}

.project-color-choice {
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  border-radius: 999px !important;
  border: 3px solid #fff !important;
  background: var(--choice-color) !important;
  box-shadow: 0 0 0 1px rgba(234, 215, 193, 0.95), 0 8px 14px rgba(74, 42, 12, 0.1) !important;
}

.project-color-choice.active {
  box-shadow: 0 0 0 3px var(--bb-text), 0 8px 14px rgba(74, 42, 12, 0.12) !important;
}

.project-priority-segment {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 6px !important;
  padding: 5px !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 18px !important;
  background: #fff8ef !important;
}

.project-priority-segment button {
  min-height: 44px !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--bb-muted) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
}

.project-priority-segment button.active {
  background: var(--bb-orange) !important;
  color: #fff !important;
}

.project-member-strip {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.project-member-avatar {
  width: 52px !important;
  height: 52px !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
  background: #fff3e4 !important;
  color: var(--bb-orange-deep) !important;
  font-weight: 900 !important;
}

.project-member-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.settings-hero,
.settings-card,
.settings-summary-grid article {
  border: 1px solid var(--bb-line) !important;
  border-radius: 22px !important;
  background: #fff !important;
  box-shadow: var(--bb-shadow) !important;
  color: var(--bb-text) !important;
}

.settings-hero {
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) !important;
  gap: 12px !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #f0fff0, #fff) !important;
}

.settings-hero-icon {
  width: 52px !important;
  height: 52px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 17px !important;
  background: var(--bb-green) !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  box-shadow: none !important;
}

.settings-kicker {
  color: var(--bb-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}

.settings-hero h2 {
  margin: 2px 0 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.settings-hero p {
  margin: 0 !important;
  max-width: 100% !important;
  color: var(--bb-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  overflow-wrap: anywhere !important;
}

.settings-status {
  grid-column: 1 / -1 !important;
  width: fit-content !important;
  padding: 7px 11px !important;
  border-radius: 999px !important;
  background: #fff3e4 !important;
  color: var(--bb-orange-deep) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.settings-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 8px !important;
}

.settings-summary-grid article {
  padding: 13px 8px !important;
  text-align: center !important;
  box-shadow: none !important;
}

.settings-summary-grid span {
  display: block !important;
  color: var(--bb-muted) !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}

.settings-summary-grid strong {
  display: block !important;
  margin-top: 4px !important;
  font-size: 24px !important;
  line-height: 1 !important;
  color: var(--bb-text) !important;
}

.settings-card {
  padding: 16px !important;
  box-shadow: var(--bb-shadow) !important;
}

.settings-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin-bottom: 14px !important;
}

.settings-card-head h2 {
  margin: 2px 0 0 !important;
  font-size: 20px !important;
  line-height: 1.2 !important;
  font-weight: 900 !important;
}

.app-switch input {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

.app-switch span {
  display: block !important;
  width: 58px !important;
  height: 34px !important;
  border-radius: 999px !important;
  background: #eadfd2 !important;
  box-shadow: inset 0 0 0 1px rgba(120, 67, 16, 0.12) !important;
  position: relative !important;
}

.app-switch span::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
  transition: transform 0.18s ease;
}

.app-switch input:checked + span {
  background: var(--bb-orange) !important;
}

.app-switch input:checked + span::after {
  transform: translateX(24px);
}

.settings-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

.settings-row {
  display: grid !important;
  grid-template-columns: 30px 44px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 10px !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(234, 215, 193, 0.9) !important;
  border-radius: 18px !important;
  background: #fffaf4 !important;
  box-shadow: none !important;
}

.settings-row > input[type="checkbox"] {
  width: 24px !important;
  height: 24px !important;
  accent-color: var(--bb-orange) !important;
}

.settings-row-icon {
  width: 40px !important;
  height: 40px !important;
  display: grid !important;
  place-items: center !important;
  border: 0 !important;
  border-radius: 13px !important;
  background: #fff0b9 !important;
  font-size: 20px !important;
  box-shadow: none !important;
}

.settings-row-main {
  min-width: 0 !important;
}

.settings-row-main strong {
  display: block !important;
  color: var(--bb-text) !important;
  font-size: 15px !important;
  line-height: 1.25 !important;
}

.settings-row-main small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--bb-muted) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
}

.settings-row .settings-time-input,
.settings-row > input[type="time"],
.inline-setting {
  grid-column: 1 / -1 !important;
}

.inline-setting {
  display: grid !important;
  grid-template-columns: 76px 32px minmax(0, 1fr) !important;
  align-items: center !important;
  gap: 8px !important;
}

.inline-setting input {
  min-height: 46px !important;
  text-align: center !important;
}

.inline-setting small {
  color: var(--bb-muted) !important;
  text-align: center !important;
  font-size: 12px !important;
}

@media (min-width: 391px) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Final LIFF hardening pass: stop mobile overflow and old neo controls leaking through. */
html,
body {
  overflow-x: hidden !important;
}

body .phone-app {
  width: min(100%, var(--app-width, 430px)) !important;
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

body .app-header {
  width: 100% !important;
  max-width: 100% !important;
  min-height: 76px !important;
  padding: 10px 14px !important;
  overflow: hidden !important;
  border-radius: 0 0 22px 22px !important;
}

body .app-header .brand-logo-art,
body .brand-logo-art,
body .brand-lockup::before,
body .brand-lockup::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  min-width: 0 !important;
  height: 0 !important;
  opacity: 0 !important;
}

body .brand-lockup {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 0 !important;
  max-width: calc(100% - 112px) !important;
  overflow: hidden !important;
}

body .brand-text {
  min-width: 0 !important;
  overflow: hidden !important;
}

body .app-header h1 {
  max-width: 178px !important;
  margin: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 27px !important;
  line-height: 1 !important;
}

body .app-header .tagline {
  max-width: 172px !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 10px !important;
}

body .header-actions {
  flex: 0 0 auto !important;
  gap: 8px !important;
}

body .header-actions .round-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 14px !important;
}

body[data-view~="daily-coach"] .line-status-card {
  min-height: 54px !important;
  margin: 6px 0 12px !important;
  padding: 8px 10px !important;
  border-radius: 18px !important;
  box-shadow: none !important;
}

body[data-view~="daily-coach"] .line-status-card::before {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  border-radius: 13px !important;
  font-size: 11px !important;
}

body[data-view~="daily-coach"] .line-status-card strong {
  font-size: 14px !important;
  line-height: 1.15 !important;
}

body[data-view~="daily-coach"] .line-status-card p {
  font-size: 11px !important;
  line-height: 1.25 !important;
}

body[data-view="create"] .phone-app,
body[data-view="project-create"] .phone-app,
body[data-view="settings"] .phone-app {
  padding-bottom: calc(126px + env(safe-area-inset-bottom, 0px)) !important;
}

.create-task-page,
.project-create-screen,
.settings-screen {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

.create-task-page::before,
.create-task-page::after,
.project-create-screen::before,
.project-create-screen::after,
.settings-screen::before,
.settings-screen::after {
  display: none !important;
  content: none !important;
}

.create-task-page *,
.project-create-screen *,
.settings-screen *,
.task-dialog * {
  box-sizing: border-box !important;
}

.create-task-page input,
.create-task-page textarea,
.create-task-page select,
.project-create-screen input,
.project-create-screen textarea,
.project-create-screen select,
.settings-screen input[type="time"],
.settings-screen input[type="number"],
.settings-screen select,
.task-dialog input,
.task-dialog textarea,
.task-dialog select {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--bb-text) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
  line-height: 1.25 !important;
  text-align: left !important;
  transform: none !important;
}

.create-task-page input[type="date"],
.create-task-page input[type="time"],
.project-create-screen input[type="date"],
.settings-screen input[type="time"],
.task-dialog input[type="date"],
.task-dialog input[type="time"] {
  display: block !important;
  height: 48px !important;
  min-height: 48px !important;
  text-align: left !important;
  letter-spacing: 0 !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

.create-task-page label,
.project-field,
.settings-screen label {
  min-width: 0 !important;
}

.form-row,
.project-date-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 12px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.form-actions-row,
.project-create-actions {
  position: sticky !important;
  bottom: calc(88px + env(safe-area-inset-bottom, 0px)) !important;
  z-index: 12 !important;
  margin: 16px -2px 0 !important;
  padding: 14px 2px 4px !important;
  background: linear-gradient(180deg, rgba(255, 249, 242, 0), #fff9f2 42%) !important;
}

.create-submit-button,
.project-create-confirm,
.save-button {
  border: 0 !important;
  border-radius: 18px !important;
  background: linear-gradient(180deg, #ff9832, #ff7800) !important;
  box-shadow: 0 12px 26px rgba(255, 120, 0, 0.22) !important;
  color: #fff !important;
}

.danger-outline-button,
.project-create-back {
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: none !important;
}

.task-dialog {
  width: min(calc(100vw - 22px), 418px) !important;
  max-width: calc(100vw - 22px) !important;
  max-height: calc(100dvh - 86px) !important;
  border-radius: 26px !important;
  overflow: hidden !important;
}

.task-dialog form {
  max-height: calc(100dvh - 86px) !important;
  padding: 22px 16px calc(96px + env(safe-area-inset-bottom, 0px)) !important;
}

.dialog-header {
  margin: -22px -16px 16px !important;
  padding: 16px !important;
}

#closeDialogButton,
.dialog-header .round-button {
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  border-radius: 16px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  outline: none !important;
  box-shadow: none !important;
}

#closeDialogButton:focus,
.dialog-header .round-button:focus {
  outline: none !important;
}

#closeDialogButton:focus-visible,
.dialog-header .round-button:focus-visible {
  box-shadow: 0 0 0 4px rgba(255, 135, 8, 0.15) !important;
}

.dialog-actions-row {
  position: sticky !important;
  bottom: 0 !important;
  margin: 18px -16px calc(-96px - env(safe-area-inset-bottom, 0px)) !important;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px)) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.76), #fff 36%) !important;
}

.project-icon-picker,
.project-color-picker {
  width: calc(100% + 8px) !important;
  max-width: calc(100% + 8px) !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  -webkit-overflow-scrolling: touch !important;
}

.project-icon-choice {
  flex: 0 0 56px !important;
}

.project-priority-segment {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.project-priority-segment button {
  min-width: 0 !important;
  white-space: nowrap !important;
}

.settings-screen {
  gap: 14px !important;
}

.settings-hero {
  grid-template-columns: 48px minmax(0, 1fr) auto !important;
  align-items: center !important;
  padding: 12px !important;
  border-radius: 20px !important;
  background: #f3fff5 !important;
}

.settings-hero-icon {
  width: 46px !important;
  height: 46px !important;
  border-radius: 15px !important;
}

.settings-hero h2 {
  font-size: 18px !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.settings-hero p {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
}

.settings-status {
  grid-column: auto !important;
  white-space: nowrap !important;
  padding: 7px 10px !important;
  font-size: 11px !important;
}

.settings-row {
  grid-template-columns: 28px 40px minmax(0, 1fr) !important;
  align-items: start !important;
  border-radius: 18px !important;
}

.settings-row .settings-time-input,
.settings-row > input[type="time"] {
  grid-column: 2 / -1 !important;
  height: 42px !important;
  min-height: 42px !important;
  margin-top: 8px !important;
  text-align: center !important;
}

.inline-setting {
  grid-column: 2 / -1 !important;
  grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr) !important;
  width: 100% !important;
  margin-top: 8px !important;
}

.inline-setting input {
  height: 42px !important;
  min-height: 42px !important;
  text-align: center !important;
}

.settings-actions-card,
.settings-note-card {
  padding: 14px !important;
  border: 1px solid var(--bb-line) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: var(--bb-shadow) !important;
}

@media (max-width: 390px) {
  body .app-header h1 {
    max-width: 142px !important;
    font-size: 24px !important;
  }

  body .app-header .tagline {
    max-width: 142px !important;
  }

  .settings-hero {
    grid-template-columns: 44px minmax(0, 1fr) !important;
  }

  .settings-status {
    grid-column: 2 / -1 !important;
  }
}

/* Header correction: keep the LINE webview top bar readable on narrow screens. */
body .app-header {
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 94px !important;
  align-items: center !important;
  column-gap: 8px !important;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  min-height: 70px !important;
  margin: -14px -16px 12px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 9px !important;
  overflow: hidden !important;
}

body .app-header .menu-button {
  grid-column: 1 !important;
  justify-self: start !important;
}

body .app-header .brand-lockup {
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: hidden !important;
}

body .app-header .brand-mark {
  flex: 0 0 34px !important;
  width: 34px !important;
  height: 34px !important;
}

body .app-header .brand-text {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: calc(100% - 42px) !important;
  overflow: hidden !important;
}

body .app-header h1 {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 24px !important;
  line-height: 1.05 !important;
}

body .app-header .tagline,
body .app-header .eyebrow {
  display: none !important;
}

body .app-header .header-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 94px !important;
  min-width: 94px !important;
}

body .app-header .menu-button,
body .app-header .round-button,
body .app-header .profile-dot {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
}

@media (max-width: 380px) {
  body .app-header {
    grid-template-columns: 42px minmax(0, 1fr) 88px !important;
    column-gap: 6px !important;
  }

  body .app-header .header-actions {
    width: 88px !important;
    min-width: 88px !important;
  }

  body .app-header h1 {
    font-size: 21px !important;
  }

  body .app-header .brand-mark {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
  }
}

/* Compact centered header v2: render a clean brand lockup independent of old logo rules. */
body .app-header {
  position: sticky !important;
  display: block !important;
  height: 72px !important;
  min-height: 72px !important;
}

body .app-header .menu-button {
  position: absolute !important;
  left: 14px !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  z-index: 3 !important;
}

body .app-header .header-actions {
  position: absolute !important;
  right: 14px !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  z-index: 3 !important;
  width: auto !important;
  min-width: 0 !important;
}

body .app-header .brand-lockup {
  position: absolute !important;
  left: 50% !important;
  top: calc(env(safe-area-inset-top, 0px) + 16px) !important;
  z-index: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 172px !important;
  max-width: calc(100% - 156px) !important;
  height: 40px !important;
  min-width: 0 !important;
  transform: translateX(-50%) !important;
  overflow: hidden !important;
}

body .app-header .brand-lockup > * {
  display: none !important;
}

body .app-header .brand-lockup::before {
  content: "" !important;
  display: block !important;
  flex: 0 0 30px !important;
  width: 30px !important;
  height: 30px !important;
  border-radius: 999px !important;
  background: #fff url("/brand/bossboard-mascot.png") center 28% / cover no-repeat !important;
  box-shadow: 0 5px 12px rgba(255, 135, 8, 0.24) !important;
  opacity: 1 !important;
}

body .app-header .brand-lockup::after {
  content: "BossBoard" !important;
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  color: var(--bb-text) !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  opacity: 1 !important;
}

@media (max-width: 390px) {
  body .app-header .brand-lockup {
    width: 138px !important;
    max-width: calc(100% - 148px) !important;
  }

  body .app-header .brand-lockup::before {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }

  body .app-header .brand-lockup::after {
    font-size: 18px !important;
  }
}

/* Header v3: real DOM brand element, shared by every in-app page. */
body .app-header {
  position: sticky !important;
  top: 0 !important;
  z-index: 60 !important;
  display: grid !important;
  grid-template-columns: 44px minmax(0, 1fr) 92px !important;
  align-items: center !important;
  gap: 8px !important;
  width: calc(100% + 32px) !important;
  max-width: none !important;
  height: auto !important;
  min-height: 70px !important;
  margin: -14px -16px 12px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 16px 9px !important;
  overflow: hidden !important;
  background: rgba(255, 248, 239, 0.96) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(234, 215, 193, 0.86) !important;
  border-radius: 0 0 20px 20px !important;
  box-shadow: 0 8px 20px rgba(74, 42, 12, 0.08) !important;
}

body .app-header .brand-lockup {
  display: none !important;
}

body .app-header .brand-center {
  grid-column: 2 !important;
  justify-self: center !important;
  align-self: center !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  width: 100% !important;
  max-width: 176px !important;
  min-width: 0 !important;
  height: 42px !important;
  overflow: hidden !important;
  color: var(--bb-text) !important;
  text-decoration: none !important;
}

body .app-header .brand-center img {
  flex: 0 0 32px !important;
  width: 32px !important;
  height: 32px !important;
  object-fit: cover !important;
  object-position: 50% 28% !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 6px 12px rgba(255, 135, 8, 0.24) !important;
}

body .app-header .brand-center span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body .app-header .brand-center strong {
  color: var(--bb-orange) !important;
}

body .app-header .menu-button {
  grid-column: 1 !important;
  position: static !important;
  justify-self: start !important;
}

body .app-header .header-actions {
  grid-column: 3 !important;
  position: static !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 92px !important;
  min-width: 92px !important;
}

body .app-header .menu-button,
body .app-header .round-button,
body .app-header .profile-dot {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  border-radius: 14px !important;
}

@media (max-width: 390px) {
  body .app-header {
    grid-template-columns: 42px minmax(0, 1fr) 88px !important;
    gap: 6px !important;
  }

  body .app-header .brand-center {
    max-width: 138px !important;
    gap: 5px !important;
  }

  body .app-header .brand-center img {
    width: 28px !important;
    height: 28px !important;
    flex-basis: 28px !important;
  }

  body .app-header .brand-center span {
    font-size: 18px !important;
  }

  body .app-header .header-actions {
    width: 88px !important;
    min-width: 88px !important;
  }
}

/* Header hard reset v4: never bleed outside the phone viewport. */
body .phone-app > .app-header {
  position: sticky !important;
  top: 0 !important;
  left: auto !important;
  right: auto !important;
  z-index: 80 !important;
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) 88px !important;
  align-items: center !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 64px !important;
  margin: 0 0 12px !important;
  padding: calc(env(safe-area-inset-top, 0px) + 8px) 10px 8px !important;
  overflow: hidden !important;
  transform: none !important;
  box-sizing: border-box !important;
  background: rgba(255, 248, 239, 0.98) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(234, 215, 193, 0.86) !important;
  border-radius: 0 0 18px 18px !important;
}

body .phone-app > .app-header > .menu-button,
body .phone-app > .app-header > .brand-center,
body .phone-app > .app-header > .header-actions {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body .phone-app > .app-header > .menu-button {
  grid-column: 1 !important;
  justify-self: start !important;
}

body .phone-app > .app-header > .brand-center {
  grid-column: 2 !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  max-width: 150px !important;
  height: 40px !important;
  padding: 0 !important;
  overflow: hidden !important;
  color: var(--bb-text) !important;
  text-decoration: none !important;
}

body .phone-app > .app-header > .brand-center img {
  display: block !important;
  flex: 0 0 28px !important;
  width: 28px !important;
  height: 28px !important;
  object-fit: cover !important;
  object-position: 50% 28% !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 4px 10px rgba(255, 135, 8, 0.2) !important;
}

body .phone-app > .app-header > .brand-center span {
  display: block !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: 19px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

body .phone-app > .app-header > .brand-center strong {
  color: var(--bb-orange) !important;
}

body .phone-app > .app-header > .header-actions {
  grid-column: 3 !important;
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 6px !important;
  width: 88px !important;
  max-width: 88px !important;
}

body .phone-app > .app-header .menu-button,
body .phone-app > .app-header .round-button,
body .phone-app > .app-header .profile-dot {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  max-width: 38px !important;
  padding: 0 !important;
  border-radius: 13px !important;
}

body .phone-app > .app-header .brand-lockup,
body .phone-app > .app-header .brand-logo-art,
body .phone-app > .app-header .brand-text,
body .phone-app > .app-header .brand-mark {
  display: none !important;
}

/* Settings control center: LINE-first reminder configuration. */
body[data-view="settings"] .line-status-card,
body[data-view="settings"] .section-header {
  display: none !important;
}

body .settings-screen.settings-control-center {
  display: flex !important;
  flex-direction: column !important;
  gap: 14px !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 2px 18px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body .settings-page-title {
  padding: 6px 2px 0 !important;
}

body .settings-page-title span,
body .settings-kicker {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: #eaffef !important;
  color: #14843b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
  letter-spacing: 0 !important;
}

body .settings-page-title h2 {
  margin: 0 !important;
  color: var(--bb-text) !important;
  font-size: clamp(30px, 8vw, 42px) !important;
  font-weight: 950 !important;
  line-height: 1.04 !important;
  letter-spacing: 0 !important;
}

body .settings-page-title p,
body .settings-card-head p,
body .settings-hint {
  margin: 6px 0 0 !important;
  color: var(--bb-muted) !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.45 !important;
}

body .settings-profile-card,
body .settings-card,
body .settings-note-card {
  width: 100% !important;
  max-width: 100% !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 24px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  box-shadow: 0 14px 34px rgba(80, 48, 15, 0.08) !important;
  box-sizing: border-box !important;
}

body .settings-profile-card {
  display: grid !important;
  grid-template-columns: 62px minmax(0, 1fr) auto !important;
  gap: 12px !important;
  align-items: center !important;
  padding: 14px !important;
  background: linear-gradient(135deg, #f2fff0, #fffdf8 70%) !important;
}

body .settings-profile-avatar {
  width: 62px !important;
  height: 62px !important;
  min-width: 62px !important;
  border-radius: 20px !important;
  background: #ffffff !important;
  border: 3px solid #17c653 !important;
  box-shadow: 0 8px 18px rgba(24, 198, 83, 0.16) !important;
  overflow: hidden !important;
}

body .settings-profile-avatar img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

body .settings-profile-avatar span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  color: var(--bb-orange-deep) !important;
  font-size: 18px !important;
  font-weight: 950 !important;
}

body .settings-profile-main {
  min-width: 0 !important;
}

body .settings-profile-main h2 {
  margin: 0 !important;
  color: var(--bb-text) !important;
  font-size: 21px !important;
  font-weight: 950 !important;
  line-height: 1.1 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body .settings-profile-main p {
  margin: 5px 0 0 !important;
  color: var(--bb-muted) !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.35 !important;
}

body .settings-profile-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 10px !important;
}

body .settings-profile-actions button,
body .settings-example-list button,
body .settings-action-row,
body .settings-danger-button {
  cursor: pointer !important;
  touch-action: manipulation !important;
}

body .settings-profile-actions button {
  min-height: 34px !important;
  padding: 8px 11px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 12px !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
}

body .settings-profile-actions button:last-child {
  border-color: rgba(255, 135, 8, 0.35) !important;
  background: #fff3e7 !important;
  color: var(--bb-orange-deep) !important;
}

body .settings-status {
  justify-self: end !important;
  align-self: start !important;
  padding: 7px 9px !important;
  border-radius: 999px !important;
  background: #fff4df !important;
  color: #9a5b00 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
}

body .settings-status.is-on {
  background: #dcffd9 !important;
  color: #16843d !important;
}

body .settings-summary-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
}

body .settings-summary-grid article {
  min-width: 0 !important;
  padding: 12px 8px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 18px !important;
  background: rgba(255, 250, 244, 0.96) !important;
  text-align: center !important;
}

body .settings-summary-grid span {
  display: block !important;
  color: var(--bb-muted) !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
}

body .settings-summary-grid strong {
  display: block !important;
  margin-top: 4px !important;
  color: var(--bb-orange-deep) !important;
  font-size: 28px !important;
  font-weight: 950 !important;
  line-height: 1 !important;
}

body .settings-card {
  padding: 14px !important;
}

body .settings-card-head {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 12px !important;
  margin: 0 0 12px !important;
}

body .settings-card-head.compact {
  margin-top: 8px !important;
}

body .settings-card-head h2,
body .settings-card-head h3 {
  margin: 0 !important;
  color: var(--bb-text) !important;
  font-size: 22px !important;
  font-weight: 950 !important;
  line-height: 1.12 !important;
  letter-spacing: 0 !important;
}

body .app-switch {
  flex: 0 0 auto !important;
  margin: 0 !important;
}

body .app-switch input {
  position: absolute !important;
  opacity: 0 !important;
  width: 1px !important;
  height: 1px !important;
}

body .settings-list,
body .settings-subsection {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

body .settings-row,
body .settings-toggle-row {
  display: grid !important;
  grid-template-columns: 26px 44px minmax(0, 1fr) minmax(92px, auto) !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 12px !important;
  border: 1px solid rgba(234, 215, 193, 0.82) !important;
  border-radius: 18px !important;
  background: #fffdf9 !important;
}

body .settings-toggle-row {
  grid-template-columns: 26px 44px minmax(0, 1fr) !important;
}

body .settings-row > input[type="checkbox"] {
  width: 22px !important;
  min-width: 22px !important;
  height: 22px !important;
  min-height: 22px !important;
  margin: 0 !important;
  accent-color: var(--bb-orange) !important;
}

body .settings-row-icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  background: #fff3d7 !important;
  color: var(--bb-orange-deep) !important;
  font-size: 16px !important;
  font-weight: 950 !important;
}

body .settings-row-main {
  min-width: 0 !important;
}

body .settings-row-main strong {
  display: block !important;
  color: var(--bb-text) !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
}

body .settings-row-main small {
  display: block !important;
  margin-top: 3px !important;
  color: var(--bb-muted) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  line-height: 1.28 !important;
}

body .settings-time-input,
body .inline-setting input,
body .settings-default-grid input,
body .settings-default-grid select {
  min-height: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.1 !important;
}

body .settings-time-input {
  width: 96px !important;
  max-width: 96px !important;
}

body .inline-setting {
  display: grid !important;
  grid-template-columns: 58px auto 96px !important;
  align-items: center !important;
  gap: 6px !important;
  min-width: 0 !important;
}

body .inline-setting small {
  color: var(--bb-muted) !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

body .settings-subsection {
  margin-top: 8px !important;
  padding-top: 12px !important;
  border-top: 1px dashed rgba(215, 187, 160, 0.92) !important;
}

body .settings-default-grid {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 10px !important;
  width: 100% !important;
}

body .settings-default-grid label {
  display: flex !important;
  flex-direction: column !important;
  gap: 7px !important;
  margin: 0 !important;
  color: var(--bb-text) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

body .settings-default-grid input,
body .settings-default-grid select {
  width: 100% !important;
  max-width: 100% !important;
  padding: 10px 12px !important;
}

body .settings-coach-card .save-button {
  margin-top: 12px !important;
}

body .settings-example-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}

body .settings-example-list button {
  min-height: 38px !important;
  padding: 9px 12px !important;
  border: 1px solid rgba(255, 135, 8, 0.32) !important;
  border-radius: 999px !important;
  background: #fff5e7 !important;
  color: var(--bb-orange-deep) !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}

body .settings-menu-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 9px !important;
}

body .settings-action-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  width: 100% !important;
  min-height: 52px !important;
  padding: 13px 14px !important;
  border: 1px solid rgba(234, 215, 193, 0.95) !important;
  border-radius: 16px !important;
  background: #fff !important;
  color: var(--bb-text) !important;
  text-align: left !important;
}

body .settings-action-row span {
  min-width: 0 !important;
  color: var(--bb-text) !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  line-height: 1.25 !important;
}

body .settings-action-row strong {
  flex: 0 0 auto !important;
  color: var(--bb-orange-deep) !important;
  font-size: 13px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

body .settings-note-card {
  padding: 14px !important;
  background: #f3fff5 !important;
}

body .settings-note-card strong {
  display: block !important;
  color: #14843b !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

body .settings-note-card p {
  margin: 6px 0 0 !important;
  color: #376347 !important;
  font-size: 12px !important;
  font-weight: 750 !important;
  line-height: 1.45 !important;
}

body .settings-danger-button {
  width: 100% !important;
  min-height: 50px !important;
  padding: 13px 16px !important;
  border: 1px solid rgba(186, 26, 26, 0.28) !important;
  border-radius: 18px !important;
  background: #fff !important;
  color: #b91c1c !important;
  font-size: 15px !important;
  font-weight: 950 !important;
}

@media (max-width: 390px) {
  body .settings-profile-card {
    grid-template-columns: 54px minmax(0, 1fr) !important;
  }

  body .settings-profile-avatar {
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
  }

  body .settings-status {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }

  body .settings-row {
    grid-template-columns: 24px 38px minmax(0, 1fr) !important;
  }

  body .settings-row .settings-time-input,
  body .settings-row .inline-setting {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body .settings-time-input {
    width: 100% !important;
    max-width: 100% !important;
  }
}