* { box-sizing: border-box; }

html {
  color-scheme: dark;
}

body {
  margin: 0;
  background: #070b15;
  color: #f7f8ff;
  font-family: system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
}

button,
input,
select,
textarea {
  font: inherit;
}

.shell {
  max-width: 760px;
  margin: auto;
  padding: 24px 18px 96px;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

small {
  color: #9aa8c7;
}

h1 {
  margin: 0.25rem 0;
  font-size: 2rem;
}

h3 {
  margin: 0;
}

p {
  color: #aeb9d2;
}

.icon,
.secondary {
  background: #151b2c;
  color: #fff;
  border: 1px solid #28314c;
}

.icon {
  width: 48px;
  height: 48px;
  padding: 0;
}

.ringWrap {
  display: flex;
  gap: 18px;
  align-items: center;
  margin: 26px 0;
}

.ring {
  position: relative;
  width: 104px;
  height: 104px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(#7367f0 0%, #141a2a 0);
}

.ring::before {
  content: "";
  position: absolute;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #070b15;
}

.ring span {
  z-index: 1;
  font-weight: 800;
}

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

.card {
  background: #0f1524;
  border: 1px solid #202942;
  border-radius: 20px;
  padding: 16px;
  min-height: 118px;
  color: #fff;
  text-align: right;
  cursor: pointer;
  width: 100%;
  transition: 0.15s transform, 0.15s border-color;
}

.card:active {
  transform: scale(0.985);
}

.card:hover {
  border-color: #53639a;
}

.card h3 {
  margin: 0 0 8px;
}

.value {
  font-size: 1.45rem;
  font-weight: 800;
}

.ok {
  color: #77e0bc;
}

.ongoing {
  color: #ffcf66;
}

.actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.planSurface {
  margin-top: 18px;
  padding: 18px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(18, 25, 42, 0.95), rgba(11, 16, 28, 0.98));
  border: 1px solid #24314e;
}

.sectionHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.sectionHead h2 {
  margin: 0.25rem 0 0;
}

.todayPlanArea {
  display: grid;
  gap: 12px;
}

.emptyState {
  margin: 0;
  padding: 14px;
  border-radius: 16px;
  border: 1px dashed #314260;
  background: rgba(8, 13, 24, 0.65);
  color: #aeb9d2;
}

.planDayCard,
.planMealCard {
  background: #0a1020;
  border: 1px solid #263352;
  border-radius: 18px;
  padding: 14px;
}

.planDayMeta,
.planMealMeta,
.planAlternativeHead,
.planRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.planDayMeta,
.planMealMeta {
  margin-bottom: 10px;
}

.planBadgeRow,
.chipRow,
.optionRow,
.inlineActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.planBadge,
.chip,
.optionBtn {
  border-radius: 999px;
  border: 1px solid #314260;
  background: #141c31;
  color: #dce3f7;
  padding: 8px 12px;
  font-size: 0.92rem;
}

.optionBtn {
  cursor: pointer;
}

.optionBtn.selected {
  background: linear-gradient(135deg, #3768ff, #7b56e8);
  border-color: transparent;
}

.planTime {
  color: #8bd6f1;
  font-weight: 700;
}

.planAlternative {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border-radius: 14px;
  background: #10182c;
  border: 1px solid #26324f;
}

.planAlternativeItems {
  margin: 0;
  padding-inline-start: 18px;
  color: #f7f8ff;
}

.planAlternativeItems li + li {
  margin-top: 4px;
}

.planManagerList {
  display: grid;
  gap: 10px;
}

.planEditorBody {
  display: grid;
  gap: 14px;
  max-height: min(68vh, 700px);
  overflow: auto;
  padding-inline-end: 2px;
}

.stackMenu {
  display: grid;
  gap: 8px;
}

.planInputGrid {
  display: grid;
  gap: 10px;
}

.planInputGrid.cols2 {
  grid-template-columns: 1fr 1fr;
}

.planGroup {
  border: 1px solid #293553;
  border-radius: 18px;
  padding: 14px;
  background: #0b1120;
  display: grid;
  gap: 10px;
}

.planSubgroup {
  border: 1px solid #23304d;
  border-radius: 16px;
  padding: 12px;
  background: #10192e;
  display: grid;
  gap: 10px;
}

.planItemsTextarea {
  min-height: 94px;
}

.planActionsColumn {
  display: grid;
  gap: 8px;
}

button {
  border: 0;
  border-radius: 16px;
  padding: 14px 16px;
  background: linear-gradient(135deg, #3768ff, #7b56e8);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

button:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.danger {
  background: linear-gradient(135deg, #e04462, #a9345f);
}

.full {
  width: 100%;
}

.miniBtn {
  padding: 9px 12px;
  border-radius: 12px;
  font-size: 0.9rem;
}

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

dialog {
  background: #0f1524;
  color: #fff;
  border: 1px solid #2b3658;
  border-radius: 22px;
  max-width: 520px;
  width: min(94%, 520px);
  padding: 22px;
}

dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
}

.dialogForm {
  display: grid;
  gap: 4px;
}

.dialogHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.dialogHead h2 {
  margin: 0;
}

.closeBtn {
  background: transparent;
  border: 1px solid #2b3658;
  border-radius: 12px;
  padding: 4px 12px;
  font-size: 1.5rem;
}

label {
  display: grid;
  gap: 8px;
  margin: 10px 0;
}

input,
select,
textarea {
  width: 100%;
  background: #080d18;
  color: #fff;
  border: 1px solid #2b3658;
  border-radius: 12px;
  padding: 11px 12px;
}

textarea {
  resize: vertical;
}

.toggleRow {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.toggleRow input {
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: #685ff2;
  flex: 0 0 auto;
}

menu {
  display: flex;
  gap: 8px;
  padding: 0;
  margin: 16px 0 0;
}

menu button {
  flex: 1;
}

.hint {
  font-size: 0.9rem;
  margin: 0.2rem 0 0;
}

.bigStatus {
  font-weight: 800;
  font-size: 1.05rem;
  line-height: 1.7;
}

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

.quick {
  background: #18213a;
  border: 1px solid #334064;
}

.severity {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.severity button {
  padding: 11px 0;
  background: #171f34;
  border: 1px solid #34405f;
}

.severity button.selected {
  background: linear-gradient(135deg, #3768ff, #7b56e8);
  border-color: transparent;
}

.severityReadout {
  margin: 3px 0 8px;
}

.summaryBox {
  background: #090f1d;
  border: 1px solid #293553;
  border-radius: 16px;
  padding: 14px;
  margin: 12px 0;
}

.summaryBox p {
  margin: 5px 0;
}

fieldset {
  border: 1px solid #293553;
  border-radius: 16px;
  margin: 10px 0;
  padding: 12px;
}

legend {
  padding: 0 6px;
  color: #dce3f7;
}

hr {
  border: 0;
  border-top: 1px solid #28314c;
  width: 100%;
  margin: 18px 0;
}

.historySection {
  margin-top: 12px;
  border-top: 1px solid #28314c;
  padding-top: 12px;
}

.historyHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.historyList {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  max-height: 220px;
  overflow: auto;
}

.historyEmpty {
  margin: 0;
  color: #9aa8c7;
}

.historyItem {
  background: #0a1020;
  border: 1px solid #25324f;
  border-radius: 16px;
  padding: 12px;
  display: grid;
  gap: 8px;
}

.historyMeta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  color: #dce3f7;
  font-size: 0.95rem;
}

.historyValue {
  margin: 0;
  color: #f7f8ff;
  word-break: break-word;
}

.historyActions {
  display: flex;
  gap: 8px;
}

.historyActions button {
  flex: 1;
  padding: 10px 12px;
  border-radius: 12px;
}

.toastViewport {
  position: fixed;
  inset: auto 12px 16px 12px;
  display: grid;
  gap: 8px;
  pointer-events: none;
  z-index: 999;
}

.toast {
  pointer-events: auto;
  border-radius: 16px;
  padding: 12px 14px;
  border: 1px solid transparent;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.28);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.toast.visible {
  opacity: 1;
  transform: translateY(0);
}

.toast-success {
  background: rgba(19, 44, 34, 0.95);
  border-color: #2f7b57;
  color: #d7ffee;
}

.toast-warning {
  background: rgba(51, 38, 15, 0.95);
  border-color: #a9731f;
  color: #ffe7bf;
}

.toast-error {
  background: rgba(51, 21, 27, 0.95);
  border-color: #8d2b40;
  color: #ffd9e2;
}

@media (max-width: 520px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .shell {
    padding-top: max(20px, env(safe-area-inset-top));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  dialog {
    padding: 18px;
  }

  .card {
    min-height: 112px;
    padding: 14px;
  }

  .value {
    font-size: 1.25rem;
  }

  .splitActions {
    grid-template-columns: 1fr;
  }

  .sectionHead,
  .planDayMeta,
  .planMealMeta,
  .planAlternativeHead,
  .planRow {
    align-items: stretch;
    flex-direction: column;
  }

  .planInputGrid.cols2 {
    grid-template-columns: 1fr;
  }
}

.planStatusStack { display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.actualChip { border-color:#4b79ff; background:rgba(75,121,255,.16); }
.subtleChip { opacity:.78; }
.actualSummary { margin-top:10px; padding:10px 12px; border:1px dashed #314064; border-radius:14px; background:#0b1224; color:#dce3f7; line-height:1.7; }
.actualSummary span { color:#aeb9d6; font-size:.92rem; }
#actualMealText[readonly] { opacity:.85; background:#0a1020; }

/* v0.5 Nutrition Engine */
.nutritionSummaryGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 10px 0 4px;
}
.nutritionMetric {
  background: #0a1020;
  border: 1px solid #25324f;
  border-radius: 14px;
  padding: 11px;
  min-width: 0;
}
.nutritionMetric strong { display:block; font-size:1rem; }
.nutritionMetric span { display:block; margin-top:4px; color:#aeb9d6; font-size:.9rem; }
.nutritionGoalGrid {
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
  margin:10px 0;
}
.nutritionAddRow {
  display:grid;
  grid-template-columns: minmax(0,2fr) minmax(100px,1fr);
  gap:8px;
}
.nutritionList { max-height: 300px; }
.nutritionTotalsLine {
  display:flex;
  flex-wrap:wrap;
  gap:6px 10px;
  color:#dce3f7;
  font-size:.93rem;
}
.nutritionTotalsLine span { white-space:nowrap; }
.nutritionMissing { color:#f4c36b; }
.nutritionComplete { color:#7ee2ae; }
.nutritionFoodName { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.nutritionFoodName small { color:#8fa0c2; }

@media (max-width: 520px) {
  .nutritionSummaryGrid,
  .nutritionGoalGrid,
  .nutritionAddRow {
    grid-template-columns: 1fr;
  }
}

.historyActions { flex-wrap: wrap; }
.historyActions button { min-width: 92px; }


/* v0.6 Health Tracking */
.healthPanel { margin-top:16px; padding-top:14px; border-top:1px solid #28314c; }
.healthPanel:first-of-type { margin-top:4px; border-top:0; }
.healthTwoCols, .measurementGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.measurementGrid { grid-template-columns:repeat(3,minmax(0,1fr)); }
.triggerGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.triggerGrid label { display:flex; flex-direction:row; align-items:center; gap:7px; margin:0; padding:8px 9px; background:#0a1020; border:1px solid #25324f; border-radius:12px; }
.triggerGrid input { width:auto; margin:0; }
.photoGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-top:10px; }
.photoCard { background:#0a1020; border:1px solid #25324f; border-radius:14px; padding:8px; display:grid; gap:7px; }
.photoCard img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; background:#060a12; }
.photoCard p { margin:0; font-size:.88rem; }
.healthTrendPositive { color:#7ee2ae; }
.healthTrendNeutral { color:#aeb9d6; }
@media (max-width:520px) { .healthTwoCols, .measurementGrid, .triggerGrid, .photoGrid { grid-template-columns:1fr; } }


/* v0.7 Training Engine */
.trainingPanel { margin-top:16px; padding-top:14px; border-top:1px solid #28314c; }
.trainingPanel:first-of-type { margin-top:4px; border-top:0; }
.gymModeToggle { display:flex; flex-direction:row; gap:8px; align-items:center; margin:0; padding:8px 10px; border:1px solid #33405f; border-radius:12px; background:#0a1020; }
.gymModeToggle input { width:auto; margin:0; }
.trainingExerciseList { display:grid; gap:12px; margin:12px 0; }
.trainingExercise { border:1px solid #2a3654; border-radius:16px; background:#0a1020; padding:12px; }
.trainingExercise .historyHead > div { display:grid; gap:4px; }
.exercisePrevious { color:#8fa0c2; }
.trainingSets { display:grid; gap:8px; margin-top:10px; }
.trainingSetRow { display:grid; grid-template-columns:auto minmax(80px,1fr) minmax(90px,1fr) auto; gap:8px; align-items:end; }
.trainingSetRow label { margin:0; }
.setNumber { align-self:center; color:#aeb9d6; white-space:nowrap; font-size:.88rem; }
.trainingCardio { margin:14px 0; padding:12px; border:1px dashed #33405f; border-radius:14px; }
.trainingCardio h4 { margin:0 0 10px; }
.trainingPrBadge { color:#f7d56b; font-weight:700; }
#trainingDialog.gym-mode .trainingPanel:first-of-type { display:none; }
#trainingDialog.gym-mode .trainingSetRow input { min-height:52px; font-size:1.15rem; }
#trainingDialog.gym-mode .addSetBtn,
#trainingDialog.gym-mode #saveTrainingSession { min-height:52px; font-size:1rem; }
#trainingDialog.gym-mode .trainingExercise { border-width:2px; }
@media (max-width:520px) {
  .trainingSetRow { grid-template-columns:1fr 1fr; }
  .trainingSetRow .setNumber { grid-column:1 / -1; }
  .trainingSetRow .removeSetBtn { width:100%; }
}


/* v0.8 Analytics & Motivation */
.analyticsPanel { margin-top:16px; padding-top:14px; border-top:1px solid #28314c; }
.analyticsPanel:first-of-type { border-top:0; margin-top:4px; }
.analyticsGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.analyticsStat { border:1px solid #2b3652; background:#0a1020; border-radius:14px; padding:12px; display:grid; gap:6px; }
.analyticsStat span { color:#98a7c8; font-size:.83rem; }
.analyticsStat strong { font-size:1.05rem; }
.trendBars { min-height:120px; display:flex; align-items:flex-end; gap:8px; padding:12px 6px 0; overflow-x:auto; }
.trendBarWrap { min-width:34px; display:grid; justify-items:center; gap:5px; }
.trendBar { width:22px; border-radius:8px 8px 3px 3px; background:linear-gradient(180deg,#8b7df7,#5147be); }
.insightList { display:grid; gap:8px; }
.insightItem { border:1px solid #2b3652; background:#0a1020; border-radius:12px; padding:11px; line-height:1.6; }
.goalGrid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.goalVisibility { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:12px 0; }
.goalVisibility label { display:flex; flex-direction:row; align-items:center; gap:8px; margin:0; border:1px solid #2b3652; padding:9px; border-radius:12px; }
.goalVisibility input { width:auto; margin:0; }
.achievementGrid { display:grid; gap:8px; }
.achievement { display:flex; gap:10px; align-items:center; border:1px solid #2b3652; border-radius:13px; padding:10px; opacity:.58; }
.achievement.unlocked { opacity:1; border-color:#5363a4; }
.achievement > span { font-size:1.2rem; }
.achievement div { display:grid; gap:3px; }
.achievement small { color:#97a6c5; }
.closureChecklist { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:10px 0; }
.closureItem { border:1px solid #34405d; border-radius:12px; padding:9px; display:flex; gap:8px; align-items:center; }
.closureItem.done { border-color:#3d7a63; }
.mealResolutionRow { display:grid; grid-template-columns:minmax(0,1fr) minmax(145px,.8fr); gap:10px; align-items:center; border-top:1px solid #29324c; padding:10px 0; }
.mealResolutionRow select { margin:0; }
@media (max-width:520px) {
  .analyticsGrid, .goalGrid, .goalVisibility, .closureChecklist { grid-template-columns:1fr; }
  .mealResolutionRow { grid-template-columns:1fr; }
}


/* v0.9 Reports & AI */
.reportsPanel { margin-top:16px; padding-top:14px; border-top:1px solid #28314c; }
.reportsPanel:first-of-type { border-top:0; margin-top:4px; }
.reportPresetRow { display:flex; gap:8px; margin:8px 0 12px; flex-wrap:wrap; }
.reportPreset.active { border-color:#7067d9; box-shadow:0 0 0 1px #7067d9 inset; }
.reportNarrative { display:grid; gap:8px; margin-top:12px; }
.reportExportGrid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#aiAnalysisPrompt { direction:ltr; text-align:left; font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:.78rem; line-height:1.55; }
@media (max-width:520px) {
  .reportExportGrid { grid-template-columns:1fr; }
}


/* v1.0 Cloud Sync + Final Hardening */
.cloudPanel { margin-top:16px; padding-top:14px; border-top:1px solid #28314c; }
.cloudPanel:first-of-type { border-top:0; margin-top:4px; }
.cloudConfigGrid { display:grid; gap:10px; }
.cloudActions { margin-top:10px; }
@media (max-width:520px) {
  .cloudActions { grid-template-columns:1fr; }
}

/* v1.0 Productization Pass 1 */
:root{--mj-bg:#17181f;--mj-surface:#24252b;--mj-surface2:#2c2d34;--mj-border:#424349;--mj-text:#fff;--mj-muted:#a9aab2;--mj-primary:#8766eb;--mj-highlight:#ecfe72;--mj-aqua:#72feed;--mj-success:#4ac067;--mj-danger:#ff7043;--mj-info:#6693eb;--mj-shadow:0 18px 60px rgba(0,0,0,.32)}
html{background:var(--mj-bg);scroll-behavior:smooth}body{background:radial-gradient(circle at 90% -10%,rgba(135,102,235,.11),transparent 29rem),radial-gradient(circle at -10% 25%,rgba(114,254,237,.05),transparent 26rem),var(--mj-bg);color:var(--mj-text);font-family:"SF Arabic","Avenir Next Arabic","Geeza Pro",-apple-system,BlinkMacSystemFont,"Segoe UI",Tahoma,sans-serif;padding-bottom:calc(92px + env(safe-area-inset-bottom))}.shell{max-width:720px;padding:24px 18px 130px}header{align-items:center;margin-bottom:12px}header small,.hint,small{color:var(--mj-muted)}header h1{font-size:2.35rem;letter-spacing:-.035em;font-weight:750}header p{color:#d1d1d7;line-height:1.7}.headerTools{display:flex;align-items:center;gap:8px}.icon,.secondary{background:var(--mj-surface);border-color:var(--mj-border)}button{border-radius:16px}.syncPill{display:flex;align-items:center;gap:7px;min-height:38px;padding:8px 11px;border-radius:999px;background:rgba(36,37,43,.86);border:1px solid var(--mj-border);color:#e8e8ed;font-size:.73rem;backdrop-filter:blur(18px)}.syncDot{width:8px;height:8px;border-radius:50%;background:var(--mj-success)}.syncPill[data-mode=pending] .syncDot{background:var(--mj-highlight);animation:mjPulse 1.1s infinite}.syncPill[data-mode=offline] .syncDot{background:var(--mj-muted)}@keyframes mjPulse{50%{opacity:.32;transform:scale(.78)}}
.ringWrap,.premiumSurface,.planSurface{background:linear-gradient(160deg,rgba(41,42,49,.98),rgba(31,32,38,.98));border:1px solid rgba(255,255,255,.07);border-radius:24px;box-shadow:var(--mj-shadow)}.ringWrap{padding:18px;margin:18px 0 14px}.ring{background:conic-gradient(var(--mj-success) 0%,#34353d 0)}.ring::before{background:var(--mj-surface)}.grid{gap:10px}.card{background:var(--mj-surface);border:1px solid rgba(255,255,255,.065);border-radius:20px;min-height:108px;padding:15px;box-shadow:0 8px 26px rgba(0,0,0,.16)}.card:hover{border-color:rgba(236,254,114,.38)}.ok{color:var(--mj-success)}.ongoing{color:var(--mj-highlight)}.premiumSurface{margin-top:14px;padding:17px}.compactHead{margin-bottom:10px}.compactHead h2{font-size:1.1rem;margin:.2rem 0 0}.microHelp{width:38px;height:38px;border-radius:50%;border:1px solid var(--mj-border);background:var(--mj-surface2);color:var(--mj-highlight);font-weight:800}.attentionList{display:grid;gap:8px}.attentionItem{width:100%;display:grid;grid-template-columns:42px 1fr auto;gap:10px;align-items:center;text-align:right;padding:11px 12px;border-radius:16px;border:1px solid rgba(255,255,255,.06);background:var(--mj-surface2);color:white;position:relative;overflow:hidden}.attentionItem::before{content:"";position:absolute;inset-block:0;right:0;width:3px;background:var(--mj-info)}.attention-warning::before{background:var(--mj-highlight)}.attention-danger::before{background:var(--mj-danger)}.attention-personal::before{background:var(--mj-primary)}.attentionItem span:nth-child(2){display:grid;gap:3px}.attentionItem small{font-size:.78rem}.attentionItem i{font-style:normal;color:var(--mj-muted);font-size:1.4rem}.allGoodCard{display:flex;align-items:center;gap:12px;padding:13px;background:rgba(74,192,103,.09);border:1px solid rgba(74,192,103,.26);border-radius:16px}.allGoodCard>span{display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:var(--mj-success);color:#101510;font-weight:900}.allGoodCard div{display:grid;gap:3px}.todayTimeline{display:grid}.timelineRow{display:grid;grid-template-columns:42px 1fr;gap:10px;position:relative;padding:7px 0}.timelineRow:not(:last-child)::after{content:"";position:absolute;right:20px;top:43px;bottom:-4px;width:1px;background:var(--mj-border)}.timelineDot{width:40px;height:40px;border-radius:14px;background:var(--mj-surface2);display:grid;place-items:center;z-index:1}.timelineRow div{display:flex;justify-content:space-between;align-items:center}.timelineRow small{direction:ltr}
.bottomNav{position:fixed;z-index:150;right:50%;transform:translateX(50%);bottom:max(10px,env(safe-area-inset-bottom));width:min(calc(100% - 24px),680px);height:70px;display:grid;grid-template-columns:repeat(5,1fr);padding:7px;border:1px solid rgba(255,255,255,.09);border-radius:24px;background:rgba(36,37,43,.91);backdrop-filter:blur(24px);box-shadow:0 20px 55px rgba(0,0,0,.45)}.bottomNav button{border:0;background:transparent;color:var(--mj-muted);padding:5px 2px;display:grid;place-items:center;gap:1px;border-radius:16px}.bottomNav button b{font-size:.67rem}.bottomNav button.active{background:rgba(135,102,235,.17);color:#fff}.bottomNav button.active span{color:var(--mj-highlight)}.quickAddFab{position:fixed;z-index:160;bottom:calc(max(10px,env(safe-area-inset-bottom)) + 52px);right:50%;transform:translateX(50%);width:54px;height:54px;padding:0;border:4px solid var(--mj-bg)!important;border-radius:50%!important;background:var(--mj-primary)!important;font-size:2rem;box-shadow:0 12px 30px rgba(135,102,235,.42)}
dialog{background:var(--mj-surface);border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px rgba(0,0,0,.58)}dialog::backdrop{background:rgba(10,10,14,.58);backdrop-filter:blur(8px) saturate(.72)}.bottomSheetDialog{width:min(680px,calc(100% - 18px));max-height:min(86dvh,820px);margin:auto auto 8px;border-radius:28px 28px 24px 24px;padding:0}.bottomSheetDialog .dialogForm{padding:11px 17px 18px}.sheetHandle{width:42px;height:5px;border-radius:10px;background:#5a5b64;margin:0 auto 12px}.quickActionGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.quickActionGrid button{min-height:92px;display:grid;place-items:center;gap:5px;background:var(--mj-surface2)!important;border:1px solid var(--mj-border)!important;color:white!important;font-size:1.35rem}.quickActionGrid button span{font-size:.84rem}.reminderSettingsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}.helpHero{padding:14px;border-radius:18px;background:linear-gradient(135deg,rgba(135,102,235,.17),rgba(236,254,114,.07));border:1px solid rgba(135,102,235,.27);margin-bottom:12px}.helpAccordion{display:grid;gap:8px}.helpAccordion details{background:var(--mj-surface2);border:1px solid rgba(255,255,255,.06);border-radius:16px;padding:12px}.helpAccordion summary{font-weight:700;cursor:pointer}.helpAccordion p{line-height:1.75}.helpMiniSection{margin-top:12px;padding:12px;border-radius:16px;background:var(--mj-surface2)}.toastViewport{z-index:9999!important}.toast{background:rgba(36,37,43,.96)!important;border:1px solid var(--mj-border)!important;box-shadow:0 18px 50px rgba(0,0,0,.45)!important;backdrop-filter:blur(18px)}.toast-success{border-inline-start:4px solid var(--mj-success)!important}.toast-warning{border-inline-start:4px solid var(--mj-highlight)!important}.toast-error{border-inline-start:4px solid var(--mj-danger)!important}.photoActions{display:grid;grid-template-columns:1fr 1fr;gap:7px}.startupSkeleton{position:fixed;inset:0;z-index:12000;background:var(--mj-bg);padding:calc(24px + env(safe-area-inset-top)) 18px 30px;transition:.24s opacity,.24s filter;display:grid;align-content:start;gap:16px}.startupSkeleton.leaving{opacity:0;filter:blur(8px);pointer-events:none}.startupSkeleton span,.startupSkeleton i,.skeletonHero{display:block;background:linear-gradient(100deg,#24252b 20%,#32333a 38%,#24252b 55%);background-size:200% 100%;animation:skeletonMove 1.2s infinite;border-radius:16px}.skeletonTop{display:flex;justify-content:space-between}.skeletonTop span:first-child{width:42%;height:48px}.skeletonTop span:last-child{width:82px;height:38px}.skeletonHero{height:132px}.skeletonGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.skeletonGrid i{height:105px}.startupSkeleton p{text-align:center;color:var(--mj-muted)}@keyframes skeletonMove{to{background-position:-200% 0}}@media(max-width:520px){.shell{padding-inline:13px}.syncPill{max-width:134px}.reminderSettingsGrid{grid-template-columns:1fr}.bottomSheetDialog{width:calc(100% - 10px);margin-bottom:4px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}


/* ==========================================================================
   v1.0 Productization Pass 2
   TRUE TABS + APPROVED PALETTE ENFORCEMENT
   No blue-purple gradients. Neutral-first; accents are intentional.
   ========================================================================== */

:root{
  --mj-bg:#17181F;
  --mj-surface:#24252B;
  --mj-surface2:#2C2D34;
  --mj-elevated:#34353D;
  --mj-border:#424349;
  --mj-text:#FFFFFF;
  --mj-muted:#A9AAB2;
  --mj-primary:#8766EB;
  --mj-highlight:#ECFE72;
  --mj-aqua:#72FEED;
  --mj-success:#4AC067;
  --mj-danger:#FF7043;
  --mj-info:#6693EB;
}

/* Kill every legacy brand gradient in the visible app shell. */
body{background:var(--mj-bg)!important}
.ringWrap,.premiumSurface,.planSurface,.helpHero{
  background:var(--mj-surface)!important;
  background-image:none!important;
}
button,
button:not(.secondary):not(.icon):not(.closeBtn):not(.microHelp):not(.bottomNav button):not(.quickAddFab):not(.attentionItem):not(.syncPill){
  background-image:none!important;
}
button:not(.secondary):not(.icon):not(.closeBtn):not(.microHelp):not(.bottomNav button):not(.quickAddFab):not(.attentionItem):not(.syncPill):not(.featureAction):not(.destinationCard){
  background:var(--mj-highlight)!important;
  color:#17181F!important;
  border-color:var(--mj-highlight)!important;
  font-weight:760;
}
.secondary{
  background:var(--mj-surface2)!important;
  color:var(--mj-text)!important;
  border-color:var(--mj-border)!important;
}
.danger,.dangerRow{color:#FFD8CE!important}
.trendBar{background:var(--mj-primary)!important}
.reportPreset.active{border-color:var(--mj-highlight)!important;box-shadow:0 0 0 1px var(--mj-highlight) inset!important}
.actualChip{border-color:var(--mj-aqua)!important;background:rgba(114,254,237,.09)!important}

/* True application screens */
#viewHost{min-height:calc(100dvh - 190px)}
.appView{display:none;animation:viewEnter .18s ease-out}
.appView.active{display:block}
.appView[hidden]{display:none!important}
@keyframes viewEnter{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}
.viewIntro{margin:12px 2px 18px}
.viewIntro small,.viewSectionHead small{color:var(--mj-muted)}
.viewIntro h2{font-size:1.75rem;margin:.18rem 0 .3rem;letter-spacing:-.025em}
.viewIntro p{color:var(--mj-muted);line-height:1.65;margin:0;max-width:38rem}
.viewSectionHead{display:flex;align-items:center;justify-content:space-between;margin:0 2px 10px}
.viewSectionHead h2{font-size:1.05rem;margin:.15rem 0 0}
.homeSection{margin-top:16px}
.homeInsightSurface{border-inline-start:3px solid var(--mj-highlight)!important}
.homeInsightSurface p{color:#D6D6DC;line-height:1.7;margin:.45rem 0 0}
.accentDot{color:var(--mj-highlight);font-size:1.05rem}
.limeLabel{display:inline-block;background:var(--mj-highlight);color:#17181F;border-radius:999px;padding:4px 9px;font-size:.72rem;font-weight:800}

.helpEntryCard{
  margin-top:14px;display:grid;grid-template-columns:40px 1fr auto;align-items:center;gap:10px;
  padding:13px 14px;background:var(--mj-surface);border:1px solid rgba(255,255,255,.07);border-radius:18px;
}
.helpEntryCard>span{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(236,254,114,.10);color:var(--mj-highlight)}
.helpEntryCard>div{display:grid;gap:3px}.helpEntryCard small{color:var(--mj-muted)}
.textAction{background:transparent!important;border:0!important;color:var(--mj-highlight)!important;padding:8px!important;font-weight:750}

.todayActions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.featureAction{
  min-height:102px;padding:14px;text-align:right;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:10px;
  background:var(--mj-surface)!important;color:white!important;border:1px solid rgba(255,255,255,.075)!important;border-radius:20px!important;
}
.featureAction>span{grid-row:1/3;font-size:1.35rem;align-self:center}
.featureAction b{font-size:.95rem}.featureAction small{color:var(--mj-muted);font-size:.74rem}
.featureAction:first-child{border-inline-start:3px solid var(--mj-primary)!important}
.secondaryFeature{border-inline-start:3px solid var(--mj-success)!important}

.destinationGrid{display:grid;gap:10px}
.destinationCard{
  width:100%;min-height:88px;display:grid;grid-template-columns:46px 1fr auto;gap:11px;align-items:center;text-align:right;
  background:var(--mj-surface)!important;color:white!important;border:1px solid rgba(255,255,255,.07)!important;border-radius:20px!important;padding:13px!important;
}
.destinationCard>span{display:grid;place-items:center;width:44px;height:44px;border-radius:15px;background:var(--mj-surface2);font-size:1.18rem}
.destinationCard>div{display:grid;gap:4px}.destinationCard small{color:var(--mj-muted);line-height:1.45}
.destinationCard i{font-style:normal;color:var(--mj-highlight);font-size:1.4rem}
.destinationCard:active{border-color:var(--mj-primary)!important}
.progressNote,.analyticsNote{margin-top:14px}
.progressNote h3{margin:.25rem 0}.progressNote p,.analyticsNote p{color:var(--mj-muted);line-height:1.65;margin:.35rem 0 0}

.settingsGroup{margin-top:18px}
.settingsGroup h3{color:var(--mj-muted);font-size:.78rem;font-weight:650;margin:0 6px 8px}
.settingsList{overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:20px;background:var(--mj-surface)}
.settingsList button{
  width:100%;display:grid;grid-template-columns:34px 1fr auto;gap:10px;align-items:center;text-align:right;
  min-height:58px;padding:10px 13px;background:transparent!important;color:white!important;border:0!important;border-radius:0!important;
}
.settingsList button+button{border-top:1px solid rgba(255,255,255,.055)!important}
.settingsList button>span{color:var(--mj-highlight)}.settingsList button i{font-style:normal;color:#777983;font-size:1.25rem}
.settingsList .dangerRow>span,.settingsList .dangerRow b{color:var(--mj-danger)!important}

/* Approved accents: selected nav purple, quick-add lime. */
.bottomNav{background:rgba(36,37,43,.96)!important;border-color:rgba(255,255,255,.08)!important;height:66px}
.bottomNav button.active{background:rgba(135,102,235,.16)!important;color:#fff!important}
.bottomNav button.active span{color:var(--mj-highlight)!important}
.quickAddFab{
  width:52px!important;height:52px!important;
  background:var(--mj-highlight)!important;color:#17181F!important;
  border-color:var(--mj-bg)!important;box-shadow:0 10px 28px rgba(236,254,114,.16)!important;
}

/* Home metric cards remain neutral. Accents are tiny, not full-card gradients. */
.card{background:var(--mj-surface)!important;background-image:none!important}
.card:nth-child(1){border-top:2px solid rgba(236,254,114,.75)}
.card:nth-child(2){border-top:2px solid rgba(135,102,235,.70)}
.card:nth-child(3){border-top:2px solid rgba(114,254,237,.55)}
.card:nth-child(4){border-top:2px solid rgba(74,192,103,.55)}
.card:nth-child(5){border-top:2px solid rgba(102,147,235,.55)}
.card:nth-child(6){border-top:2px solid rgba(255,112,67,.55)}

.ring{
  background:conic-gradient(var(--mj-success) var(--p,0%),var(--mj-elevated) 0)!important;
}
.planSurface{margin-top:14px}
.helpHero{border-color:rgba(236,254,114,.20)!important}
.helpAccordion details{background:var(--mj-surface2)!important}
.dialogForm button:not(.secondary):not(.closeBtn):not(.quickActionGrid button){
  background:var(--mj-highlight)!important;color:#17181F!important;border-color:var(--mj-highlight)!important;
}

/* Desktop preview still behaves like a phone app rather than a long document. */
@media(min-width:760px){
  .shell{max-width:760px}
  #viewHost{min-height:660px}
}
@media(max-width:520px){
  .todayActions{grid-template-columns:1fr}
  .appHeader{padding-top:env(safe-area-inset-top)}
  .viewIntro h2{font-size:1.55rem}
}


/* ==========================================================================
   v1.0 Productization Pass 3 — Elegance refinement
   Lime is a MICRO-ACCENT, never a dominant fill.
   ========================================================================== */

/* Primary actions: purple, not lime. */
button:not(.secondary):not(.icon):not(.closeBtn):not(.microHelp):not(.bottomNav button):not(.quickAddFab):not(.attentionItem):not(.syncPill):not(.destinationCard):not(.featureAction):not(.settingsList button):not(.severity button):not(.quickActionGrid button):not(.textAction){
  background:var(--mj-primary)!important;
  color:#fff!important;
  border-color:var(--mj-primary)!important;
  background-image:none!important;
}
button:not(.secondary):not(.icon):not(.closeBtn):not(.microHelp):not(.bottomNav button):not(.quickAddFab):not(.attentionItem):not(.syncPill):not(.destinationCard):not(.featureAction):not(.settingsList button):not(.severity button):not(.quickActionGrid button):not(.textAction):active{
  background:#7354D9!important;
}

/* Home metric cards must stay charcoal. */
#view-home #cards .card,
#view-home #cards button.card,
#view-home .card{
  background:var(--mj-surface)!important;
  color:var(--mj-text)!important;
  background-image:none!important;
  border-color:rgba(255,255,255,.07)!important;
}
#view-home #cards .card:nth-child(1){border-inline-start:3px solid rgba(236,254,114,.78)!important;border-top-color:rgba(255,255,255,.07)!important}
#view-home #cards .card:nth-child(2){border-inline-start:3px solid rgba(135,102,235,.78)!important;border-top-color:rgba(255,255,255,.07)!important}
#view-home #cards .card:nth-child(3){border-inline-start:3px solid rgba(114,254,237,.65)!important;border-top-color:rgba(255,255,255,.07)!important}
#view-home #cards .card:nth-child(4){border-inline-start:3px solid rgba(74,192,103,.65)!important;border-top-color:rgba(255,255,255,.07)!important}
#view-home #cards .card:nth-child(5){border-inline-start:3px solid rgba(102,147,235,.65)!important;border-top-color:rgba(255,255,255,.07)!important}
#view-home #cards .card:nth-child(6){border-inline-start:3px solid rgba(255,112,67,.65)!important;border-top-color:rgba(255,255,255,.07)!important}

/* More screen: elegant neutral rows. Absolutely no lime blocks. */
#view-more .settingsList{
  background:var(--mj-surface)!important;
}
#view-more .settingsList button,
#view-more .settingsList button:hover,
#view-more .settingsList button:focus{
  background:transparent!important;
  color:var(--mj-text)!important;
  background-image:none!important;
  border-color:transparent!important;
}
#view-more .settingsList button+button{
  border-top:1px solid rgba(255,255,255,.055)!important;
}
#view-more .settingsList button>span{
  color:var(--mj-muted)!important;
}
#view-more .settingsList button i{
  color:var(--mj-primary)!important;
}
#view-more .settingsList button:active{
  background:rgba(135,102,235,.08)!important;
}
#view-more .settingsList .dangerRow b,
#view-more .settingsList .dangerRow>span{
  color:var(--mj-danger)!important;
}

/* Lime = edge/highlight only. */
.homeInsightSurface{
  border-inline-start:3px solid var(--mj-highlight)!important;
  background:var(--mj-surface)!important;
}
.analyticsNote{
  border-inline-start:3px solid rgba(236,254,114,.78)!important;
}
.limeLabel{
  background:rgba(236,254,114,.10)!important;
  color:var(--mj-highlight)!important;
  border:1px solid rgba(236,254,114,.20)!important;
}
.attention-warning::before{background:var(--mj-highlight)!important}
.accentDot{color:var(--mj-highlight)!important}

/* Severity/rating controls: clear selected state. */
.severity button{
  background:#0C1424!important;
  color:#F5F5F7!important;
  border:1px solid #34405F!important;
  box-shadow:none!important;
}
.severity button.selected{
  background:var(--mj-primary)!important;
  color:#fff!important;
  border-color:var(--mj-primary)!important;
  box-shadow:0 0 0 2px rgba(135,102,235,.24)!important;
  transform:translateY(-1px);
  font-weight:800;
}
.severity button:not(.selected):active{
  background:var(--mj-surface2)!important;
}

/* Triggers/options need a visible selected state too. */
.triggerGrid label:has(input:checked),
.toggleRow:has(input:checked){
  border-color:rgba(135,102,235,.85)!important;
  background:rgba(135,102,235,.12)!important;
}
.triggerGrid input:checked,
.toggleRow input:checked{
  accent-color:var(--mj-primary)!important;
}

/* Dialog primary action is purple. Lime only for tiny accents. */
.dialogForm button:not(.secondary):not(.closeBtn):not(.quickActionGrid button):not(.severity button){
  background:var(--mj-primary)!important;
  color:#fff!important;
  border-color:var(--mj-primary)!important;
}
.dialogForm .secondary{
  background:var(--mj-surface2)!important;
  color:#fff!important;
}

/* Quick actions stay neutral; active feedback is purple. */
.quickActionGrid button{
  background:var(--mj-surface2)!important;
  color:#fff!important;
  border:1px solid var(--mj-border)!important;
}
.quickActionGrid button:active{
  border-color:var(--mj-primary)!important;
  background:rgba(135,102,235,.12)!important;
}

/* Bottom dock: active label becomes clearly larger. */
.bottomNav button b{
  font-size:.64rem!important;
  line-height:1.12;
  transition:font-size .16s ease,font-weight .16s ease,color .16s ease;
}
.bottomNav button span{
  transition:transform .16s ease,color .16s ease;
}
.bottomNav button.active b{
  font-size:.78rem!important;
  font-weight:850!important;
  color:#fff!important;
}
.bottomNav button.active span{
  transform:scale(1.10);
  color:var(--mj-primary)!important;
}
.bottomNav button.active{
  background:rgba(135,102,235,.16)!important;
}

/* Perfectly center the + glyph independently of font metrics. */
.quickAddFab{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
  font-size:0!important;
  background:var(--mj-primary)!important;
  color:#fff!important;
  box-shadow:0 10px 28px rgba(135,102,235,.28)!important;
}
.quickAddFab::before{
  content:"+";
  display:block;
  font-family:Arial,sans-serif;
  font-size:32px;
  font-weight:500;
  line-height:1;
  width:32px;
  height:32px;
  text-align:center;
  transform:translateY(-1px);
}
.quickAddFab:active{background:#7354D9!important}

/* Typography and collision prevention. */
.appHeader{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:14px!important;
  align-items:start!important;
}
.appHeader>div:first-child{min-width:0}
.appHeader h1{
  font-size:clamp(2rem,7vw,2.55rem)!important;
  line-height:1.06!important;
  margin:.12rem 0 .42rem!important;
}
.appHeader #motivation{
  font-size:clamp(.88rem,3.4vw,1rem)!important;
  line-height:1.85!important;
  overflow-wrap:anywhere;
  max-width:100%;
}
.headerTools{
  align-self:start!important;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.ringWrap{
  display:grid!important;
  grid-template-columns:auto minmax(0,1fr)!important;
  align-items:center!important;
}
.ringWrap>div:last-child{
  min-width:0;
}
.ringWrap b,.ringWrap p{
  overflow-wrap:anywhere;
}
.card{
  min-width:0;
}
.card .value,.card b,.card p{
  overflow-wrap:anywhere;
  word-break:normal;
}
.viewIntro h2,.viewIntro p,.destinationCard b,.destinationCard small,.settingsList b{
  overflow-wrap:anywhere;
}

/* Avoid cramped header on small phones. */
@media(max-width:430px){
  .appHeader{
    grid-template-columns:1fr!important;
  }
  .headerTools{
    justify-content:flex-start!important;
    direction:ltr;
  }
  .appHeader #motivation{
    line-height:1.75!important;
  }
  .bottomNav button.active b{
    font-size:.75rem!important;
  }
}


/* ==========================================================================
   v1.0 Productization Pass 4 — Screenshot-driven micro-polish
   Fixes: progress-title collision, migraine selection, FAB centering,
   active dock hierarchy, elegant varied More accents.
   ========================================================================== */

/* 1) "اليوم / تقدّم يومكِ" must be separate rows, never run together. */
.ringWrap > div:last-child{
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  min-width:0!important;
  align-content:center!important;
}
.ringWrap > div:last-child > small,
.ringWrap > div:last-child > b,
.ringWrap > div:last-child > p{
  display:block!important;
  width:100%!important;
  margin:0!important;
  white-space:normal!important;
}
.ringWrap > div:last-child > small{
  color:var(--mj-muted)!important;
  font-size:.76rem!important;
}
.ringWrap > div:last-child > b{
  font-size:1.05rem!important;
  line-height:1.35!important;
}
.ringWrap > div:last-child > p{
  color:#BCC0CB!important;
  line-height:1.55!important;
}

/* 2) Migraine / 1–5 controls:
      unselected = dark, selected = LIME only, with dark text and visible ring.
      Use ID selectors to beat the older generic dialog !important rule. */
#migSeverityButtons > button,
#migUpdateSeverityButtons > button,
#sleepQuality > button{
  background:#0C1424!important;
  background-image:none!important;
  color:#F7F7FA!important;
  border:1px solid #34405F!important;
  box-shadow:none!important;
}
#migSeverityButtons > button.selected,
#migUpdateSeverityButtons > button.selected,
#sleepQuality > button.selected{
  background:var(--mj-highlight)!important;
  background-image:none!important;
  color:#17181F!important;
  border-color:var(--mj-highlight)!important;
  box-shadow:
    0 0 0 2px rgba(236,254,114,.18),
    0 5px 16px rgba(236,254,114,.10)!important;
  font-weight:900!important;
  transform:translateY(-1px)!important;
}
#migSeverityButtons > button:not(.selected):hover,
#migUpdateSeverityButtons > button:not(.selected):hover,
#sleepQuality > button:not(.selected):hover{
  border-color:#536282!important;
}

/* Trigger choices: selected uses a restrained purple tint, not lime. */
.triggerGrid label:has(input:checked),
.toggleRow:has(input:checked){
  border-color:rgba(135,102,235,.72)!important;
  background:rgba(135,102,235,.10)!important;
}

/* 3) Perfect optical centering for the floating +.
      The pseudo-element fills the complete circle; no font-metric offset. */
.quickAddFab{
  position:fixed!important;
  display:block!important;
  padding:0!important;
  line-height:0!important;
  font-size:0!important;
  overflow:visible!important;
}
.quickAddFab::before{
  content:"+"!important;
  position:absolute!important;
  inset:0!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:auto!important;
  height:auto!important;
  margin:0!important;
  padding:0 0 2px 0!important;
  transform:none!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-size:32px!important;
  font-weight:500!important;
  line-height:1!important;
  text-align:center!important;
}

/* 4) Active dock item: stronger hierarchy without painting the dock lime. */
.bottomNav button{
  position:relative!important;
}
.bottomNav button.active{
  background:rgba(135,102,235,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(135,102,235,.10)!important;
}
.bottomNav button b{
  color:#9799A2!important;
  font-weight:650!important;
}
.bottomNav button.active b{
  color:#FFFFFF!important;
  font-size:.82rem!important;
  font-weight:950!important;
  letter-spacing:.005em!important;
}
.bottomNav button.active b::after{
  content:""!important;
  display:block!important;
  width:18px!important;
  height:2px!important;
  margin:4px auto 0!important;
  border-radius:2px!important;
  background:var(--mj-highlight)!important;
}
.bottomNav button.active span{
  color:var(--mj-primary)!important;
  transform:scale(1.14)!important;
}

/* 5) More: neutral rows with varied, elegant semantic accents.
      No full-row color fills. */
#view-more .settingsList button{
  position:relative!important;
  overflow:hidden!important;
}
#view-more .settingsList button::before{
  content:""!important;
  position:absolute!important;
  inset-block:11px!important;
  right:0!important;
  width:3px!important;
  border-radius:3px 0 0 3px!important;
  opacity:.92!important;
}
#view-more .settingsList button > span{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:10px!important;
  background:rgba(255,255,255,.035)!important;
}

/* التخطيط والصحة */
#view-more .settingsGroup:nth-of-type(1) .settingsList button:nth-child(1)::before{background:var(--mj-highlight)!important}
#view-more .settingsGroup:nth-of-type(1) .settingsList button:nth-child(1)>span{color:var(--mj-highlight)!important}
#view-more .settingsGroup:nth-of-type(1) .settingsList button:nth-child(2)::before{background:var(--mj-success)!important}
#view-more .settingsGroup:nth-of-type(1) .settingsList button:nth-child(2)>span{color:var(--mj-success)!important}
#view-more .settingsGroup:nth-of-type(1) .settingsList button:nth-child(3)::before{background:var(--mj-aqua)!important}
#view-more .settingsGroup:nth-of-type(1) .settingsList button:nth-child(3)>span{color:var(--mj-aqua)!important}

/* البيانات والتحليل */
#view-more .settingsGroup:nth-of-type(2) .settingsList button:nth-child(1)::before{background:var(--mj-info)!important}
#view-more .settingsGroup:nth-of-type(2) .settingsList button:nth-child(1)>span{color:var(--mj-info)!important}
#view-more .settingsGroup:nth-of-type(2) .settingsList button:nth-child(2)::before{background:var(--mj-primary)!important}
#view-more .settingsGroup:nth-of-type(2) .settingsList button:nth-child(2)>span{color:#A98FFF!important}
#view-more .settingsGroup:nth-of-type(2) .settingsList button:nth-child(3)::before{background:var(--mj-success)!important}
#view-more .settingsGroup:nth-of-type(2) .settingsList button:nth-child(3)>span{color:var(--mj-success)!important}

/* المساعدة والخصوصية */
#view-more .settingsGroup:nth-of-type(3) .settingsList button:nth-child(1)::before{background:var(--mj-aqua)!important}
#view-more .settingsGroup:nth-of-type(3) .settingsList button:nth-child(1)>span{color:var(--mj-aqua)!important}
#view-more .settingsGroup:nth-of-type(3) .settingsList button:nth-child(2)::before{background:var(--mj-danger)!important}

/* More row interaction stays subtle. */
#view-more .settingsList button:hover{
  background:rgba(255,255,255,.025)!important;
}
#view-more .settingsList button:active{
  background:rgba(135,102,235,.07)!important;
}

/* Dialog scrollbar: restrained instead of a visually heavy browser rail. */
dialog{
  scrollbar-width:thin;
  scrollbar-color:#62636A transparent;
}
dialog::-webkit-scrollbar{width:7px}
dialog::-webkit-scrollbar-track{background:transparent}
dialog::-webkit-scrollbar-thumb{
  background:#5A5B62;
  border-radius:999px;
}

/* Slightly better mobile ring composition. */
@media(max-width:430px){
  .ringWrap{
    grid-template-columns:90px minmax(0,1fr)!important;
    gap:14px!important;
  }
  .ringWrap .ring{
    width:88px!important;
    height:88px!important;
  }
  .bottomNav button.active b{
    font-size:.79rem!important;
  }
}


/* v1.0 Pass 4 patch v1 — active dock label specificity fix */
#bottomNav button[data-nav] b{
  font-size:12px!important;
  font-weight:650!important;
  line-height:1.1!important;
}
#bottomNav button[data-nav].active b{
  font-size:15px!important;
  font-weight:900!important;
  line-height:1.05!important;
  color:#FFFFFF!important;
}
#bottomNav button[data-nav].active b::after{
  content:""!important;
  display:block!important;
  width:18px!important;
  height:2px!important;
  margin:4px auto 0!important;
  border-radius:999px!important;
  background:var(--mj-highlight)!important;
}
@media(max-width:430px){
  #bottomNav button[data-nav] b{font-size:11px!important}
  #bottomNav button[data-nav].active b{font-size:14px!important}
}


/* v1.0 Pass 4 patch v2 — deterministic active dock state */
#bottomNav button[data-nav][aria-current="page"]{
  background:rgba(135,102,235,.18)!important;
  box-shadow:inset 0 0 0 1px rgba(135,102,235,.10)!important;
}
#bottomNav button[data-nav][aria-current="page"] b{
  font-size:15px!important;
  font-weight:900!important;
  line-height:1.05!important;
  color:#FFFFFF!important;
}
#bottomNav button[data-nav][aria-current="page"] b::after{
  content:""!important;
  display:block!important;
  width:18px!important;
  height:2px!important;
  margin:4px auto 0!important;
  border-radius:999px!important;
  background:var(--mj-highlight)!important;
}
#bottomNav button[data-nav][aria-current="page"] span{
  color:var(--mj-primary)!important;
  transform:scale(1.14)!important;
}
@media(max-width:430px){
  #bottomNav button[data-nav][aria-current="page"] b{font-size:14px!important}
}


/* v1.0 Feature Visibility Audit */
.dailyFeatureSection{margin-top:14px}
.dailyFeatureGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.dailyFeatureCard{
  position:relative;overflow:hidden;min-height:102px;padding:13px;
  display:grid;grid-template-columns:38px minmax(0,1fr);grid-template-rows:auto auto;
  gap:5px 9px;text-align:right;background:var(--mj-surface)!important;color:#fff!important;
  border:1px solid rgba(255,255,255,.07)!important;border-radius:19px!important;
}
.dailyFeatureCard::before{content:"";position:absolute;inset-block:11px;right:0;width:3px;border-radius:3px}
.dailyFeatureCard>span{grid-row:1/3;align-self:start;display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:var(--mj-surface2)}
.dailyFeatureCard>div{display:grid;gap:3px;min-width:0}
.dailyFeatureCard b{font-size:.9rem}.dailyFeatureCard small{font-size:.72rem;color:var(--mj-muted);line-height:1.45}
.dailyFeatureCard>i{grid-column:2;font-style:normal;color:#D8D8DE;font-size:.75rem}
.dailyFeatureCard.accent-lime::before{background:var(--mj-highlight)}
.dailyFeatureCard.accent-purple::before{background:var(--mj-primary)}
.dailyFeatureCard.accent-aqua::before{background:var(--mj-aqua)}
.dailyFeatureCard.accent-blue::before{background:var(--mj-info)}
.dailyFeatureCard.accent-coral::before{background:var(--mj-danger)}
.dailyFeatureCard.accent-green::before{background:var(--mj-success)}
.dailyFeatureCard:active{background:var(--mj-surface2)!important}
.progressFeatureGrid{grid-template-columns:1fr}
.helpFeatureMap{padding:13px;border:1px solid rgba(114,254,237,.18);border-inline-start:3px solid var(--mj-aqua);border-radius:16px;background:var(--mj-surface2);margin-bottom:10px}
.helpFeatureMap h3{margin:0 0 5px}.helpFeatureMap p{margin:0;color:var(--mj-muted);line-height:1.7}
@media(max-width:430px){.dailyFeatureGrid{grid-template-columns:1fr}}


/* v1.0 Visibility Audit patch 1 — screenshot polish */

/* Home summary: use the same emoji language as the detailed cards. */
#view-home #cards .card .cardTitleRow{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
#view-home #cards .card .cardIcon{
  display:grid!important;
  place-items:center!important;
  width:32px!important;
  height:32px!important;
  flex:0 0 32px!important;
  border-radius:11px!important;
  background:var(--mj-surface2)!important;
  font-size:1rem!important;
}
#view-home #cards .card h3{margin:0!important}

/* Today cards must stay charcoal. Only the side rail carries color. */
#view-today #dailyFeatureGrid > .dailyFeatureCard,
#view-today #dailyFeatureGrid > button.dailyFeatureCard{
  background:var(--mj-surface)!important;
  background-image:none!important;
  color:var(--mj-text)!important;
  border-color:rgba(255,255,255,.07)!important;
}
#view-today #dailyFeatureGrid > .dailyFeatureCard:hover{
  background:var(--mj-surface2)!important;
}
#view-today #dailyFeatureGrid > .dailyFeatureCard:active{
  background:#303139!important;
}
#view-today #dailyFeatureGrid > .dailyFeatureCard > i{
  color:#D8D8DE!important;
}

/* Non-home screens: remove repeated greeting/motivation from the top.
   Keep the full warm greeting only on Home. */
body:not([data-active-view="home"]) .appHeader > div:first-child > small,
body:not([data-active-view="home"]) .appHeader #motivation{
  display:none!important;
}
body:not([data-active-view="home"]) .appHeader{
  min-height:auto!important;
  margin-bottom:8px!important;
  align-items:center!important;
}
body:not([data-active-view="home"]) .appHeader h1{
  font-size:1.9rem!important;
  margin:0!important;
  line-height:1.1!important;
}
body:not([data-active-view="home"]) .viewIntro{
  margin-top:8px!important;
}
body:not([data-active-view="home"]) .viewIntro h2{
  font-size:1.45rem!important;
  margin:.12rem 0 .2rem!important;
}

/* Arabic navigation: destinations should visibly point LEFT. */
.destinationCard > i,
#view-more .settingsList button > i{
  font-size:0!important;
  width:24px!important;
  height:24px!important;
  display:grid!important;
  place-items:center!important;
}
.destinationCard > i::before,
#view-more .settingsList button > i::before{
  content:"←"!important;
  font-size:1rem!important;
  line-height:1!important;
  color:var(--mj-primary)!important;
  font-style:normal!important;
}

/* More uses its existing semantic rails; arrow itself stays restrained. */
#view-more .settingsList button > i::before{
  color:#8E90A0!important;
}

/* Long health dialog is intentionally a shared destination page for now.
   Improve section separation so anchored navigation feels deliberate. */
#healthDialog fieldset,
#healthDialog .healthSection,
#healthDialog section{
  scroll-margin-top:18px;
}
#healthDialog .historyHead,
#healthDialog h3{
  scroll-margin-top:18px;
}

/* Keep the dock behavior from Pass 4 unchanged. */


/* v1.0 Top-Layer Feedback System */
.toastViewport,
.toastViewport:popover-open{
  position:fixed!important;
  inset:calc(12px + env(safe-area-inset-top)) 50% auto auto!important;
  transform:translateX(50%)!important;
  width:min(560px,calc(100vw - 24px))!important;
  max-width:560px!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  color:inherit!important;
  overflow:visible!important;
  display:grid!important;
  gap:9px!important;
  pointer-events:none!important;
  z-index:2147483647!important;
}

.toastViewport::backdrop{
  background:transparent!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.toast{
  pointer-events:auto!important;
  display:grid!important;
  grid-template-columns:34px minmax(0,1fr) 32px!important;
  gap:10px!important;
  align-items:center!important;
  min-height:56px!important;
  padding:10px 10px 10px 12px!important;
  border-radius:18px!important;
  background:rgba(36,37,43,.985)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 18px 52px rgba(0,0,0,.48)!important;
  backdrop-filter:blur(22px) saturate(.92)!important;
  -webkit-backdrop-filter:blur(22px) saturate(.92)!important;
  color:#fff!important;
  opacity:0!important;
  transform:translateY(-12px) scale(.985)!important;
  transition:opacity .18s ease,transform .18s ease!important;
}

.toast.visible{
  opacity:1!important;
  transform:translateY(0) scale(1)!important;
}

.toastIcon{
  width:32px!important;
  height:32px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:11px!important;
  font-weight:900!important;
  background:var(--mj-surface2)!important;
}

.toastText{
  min-width:0!important;
  font-size:.88rem!important;
  line-height:1.55!important;
  overflow-wrap:anywhere!important;
  text-align:right!important;
}

.toastClose{
  width:30px!important;
  height:30px!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  border-radius:10px!important;
  border:0!important;
  background:transparent!important;
  color:#BFC1C8!important;
  font-size:1.15rem!important;
}

.toast-success{border-inline-start:4px solid var(--mj-success)!important}
.toast-success .toastIcon{color:var(--mj-success)!important;background:rgba(74,192,103,.10)!important}
.toast-warning{border-inline-start:4px solid var(--mj-highlight)!important}
.toast-warning .toastIcon{color:var(--mj-highlight)!important;background:rgba(236,254,114,.08)!important}
.toast-error{border-inline-start:4px solid var(--mj-danger)!important}
.toast-error .toastIcon{color:var(--mj-danger)!important;background:rgba(255,112,67,.10)!important}

@media(max-width:520px){
  .toastViewport,
  .toastViewport:popover-open{
    inset:calc(10px + env(safe-area-inset-top)) 50% auto auto!important;
    width:calc(100vw - 18px)!important;
  }
  .toast{grid-template-columns:32px minmax(0,1fr) 30px!important}
}


/* v1.0 Identity + Cloud Ownership Pass 1 */
.profileGuard{
  position:fixed;inset:0;z-index:13000;display:grid;place-items:center;padding:22px;
  background:rgba(23,24,31,.96);
}
.profileGuard[hidden]{display:none!important}
body.profile-locked #appShell,
body.profile-locked #bottomNav,
body.profile-locked #quickAddFab{
  visibility:hidden!important;
  pointer-events:none!important;
}
.profileGuardCard{
  width:min(480px,100%);padding:24px;border-radius:26px;background:var(--mj-surface);
  border:1px solid rgba(255,255,255,.08);box-shadow:0 24px 80px rgba(0,0,0,.48);text-align:center;
}
.profileGuardIcon{width:62px;height:62px;margin:0 auto 12px;border-radius:20px;display:grid;place-items:center;background:rgba(135,102,235,.12);font-size:1.7rem}
.profileGuardCard h2{margin:.3rem 0 .5rem}.profileGuardCard p{color:var(--mj-muted);line-height:1.7}
.profileGuardAccount{margin:12px 0;padding:11px;border-radius:15px;background:var(--mj-surface2);color:#DADAE0}
.profileGuardCard button{width:100%;margin-top:8px}
.profileBindIdentity{display:flex;align-items:center;gap:12px;padding:12px;border-radius:18px;background:var(--mj-surface2);margin:8px 0 12px}
.profileBindIdentity img{width:46px;height:46px;border-radius:50%;object-fit:cover}
.profileBindIdentity>div{display:grid;gap:3px}.profileBindIdentity small{color:var(--mj-muted)}
.profileBindWarning{padding:13px;border-radius:17px;background:rgba(255,112,67,.07);border-inline-start:3px solid var(--mj-danger)}
.profileBindWarning p{margin:.35rem 0 0;color:var(--mj-muted);line-height:1.65}
.dialogActionGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.profileCloudSummary{margin:10px 0;padding:11px;border-radius:15px;background:var(--mj-surface2);line-height:1.65}
.profileCloudSummary span{color:var(--mj-muted)}
@media(max-width:520px){.dialogActionGrid{grid-template-columns:1fr}}


/* v1.0 Conflict-safe multi-device sync */
.otherDeviceBanner{
  margin:0 0 12px;display:grid;grid-template-columns:38px minmax(0,1fr) 30px;gap:10px;align-items:center;
  padding:11px 12px;border-radius:17px;background:var(--mj-surface);border:1px solid rgba(102,147,235,.22);
  border-inline-start:3px solid var(--mj-info);
}
.otherDeviceBanner[hidden]{display:none!important}
.otherDeviceBanner>span{display:grid;place-items:center;width:36px;height:36px;border-radius:12px;background:rgba(102,147,235,.09)}
.otherDeviceBanner>div{display:grid;gap:3px}.otherDeviceBanner small{color:var(--mj-muted);line-height:1.45}
.otherDeviceBanner>button{width:28px;height:28px;padding:0;background:transparent!important;border:0!important;color:var(--mj-muted)!important}


/* v1.0 Backup retention + photo pipeline */
.cloudMiniGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:10px 0}
.cloudMiniCard{padding:11px;border-radius:15px;background:var(--mj-surface2);border:1px solid rgba(255,255,255,.055);display:grid;gap:4px}
.cloudMiniCard small,.cloudMiniCard span{color:var(--mj-muted);font-size:.74rem}
.photoCloudBadge{display:inline-block;margin:.25rem 0 .4rem;padding:4px 8px;border-radius:999px;background:rgba(255,112,67,.08);color:#FF9A7C;font-size:.7rem}
.photoCloudBadge.synced{background:rgba(74,192,103,.09);color:#70D78A}
.photoPendingDelete{opacity:.72}
@media(max-width:520px){.cloudMiniGrid{grid-template-columns:1fr}}


/* v1.0 Reminder orchestration + Calendar / ICS */
.reminderPanel{margin-top:12px;padding:13px;border-radius:18px;background:var(--mj-surface2);border:1px solid rgba(255,255,255,.06)}
.reminderPanel .historyHead{margin-bottom:8px}
.successChip{background:rgba(74,192,103,.10)!important;color:#70D78A!important;border-color:rgba(74,192,103,.20)!important}
.calendarCategoryGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.calendarCategoryGrid .checkRow{min-height:46px;padding:9px 10px;border-radius:13px;background:var(--mj-surface);display:flex;align-items:center;gap:8px}
.calendarCategoryGrid input{width:auto!important}
.calendarActionGrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.calendarActionGrid button:last-child{grid-column:1/-1}
.reminderStatusText{margin:.7rem 0 0;color:var(--mj-muted);font-size:.78rem;line-height:1.55}
.icsReminderPanel{border-inline-start:3px solid var(--mj-aqua)}
.calendarReminderPanel{border-inline-start:3px solid var(--mj-primary)}
@media(max-width:520px){.calendarCategoryGrid,.calendarActionGrid{grid-template-columns:1fr}.calendarActionGrid button:last-child{grid-column:auto}}

/* background working feedback */
.toast-working{border-inline-start:4px solid var(--mj-primary)!important}
.toast-working .toastIcon{background:rgba(135,102,235,.10)!important}
.workingSpinner::before{content:"";width:16px;height:16px;border:2px solid rgba(255,255,255,.22);border-top-color:var(--mj-primary);border-radius:50%;animation:mjSpin .8s linear infinite}
@keyframes mjSpin{to{transform:rotate(360deg)}}


/* ==========================================================================
   v1.0 Button Interaction State Audit
   Every button must visibly react. Persistent fill is reserved for real choices.
   ========================================================================== */

button{
  transition:
    transform .10s ease,
    background-color .14s ease,
    border-color .14s ease,
    box-shadow .14s ease,
    color .14s ease,
    filter .14s ease,
    opacity .14s ease!important;
  -webkit-tap-highlight-color:transparent;
}

button:enabled{
  cursor:pointer;
}

button:disabled{
  cursor:not-allowed!important;
  opacity:.48!important;
}

/* Immediate feedback for mouse, touch and keyboard. */
button:enabled:active,
button:enabled.uiTap{
  transform:scale(.975)!important;
  filter:brightness(1.13)!important;
  box-shadow:
    0 0 0 2px rgba(135,102,235,.28) inset,
    0 5px 14px rgba(0,0,0,.18)!important;
}

/* Neutral buttons must also visibly react, not only purple primary buttons. */
button.secondary:enabled:active,
button.secondary:enabled.uiTap,
.destinationCard:enabled:active,
.destinationCard:enabled.uiTap,
.featureAction:enabled:active,
.featureAction:enabled.uiTap,
.quickActionGrid button:enabled:active,
.quickActionGrid button:enabled.uiTap,
#view-more .settingsList button:enabled:active,
#view-more .settingsList button:enabled.uiTap,
.dailyFeatureCard:enabled:active,
.dailyFeatureCard:enabled.uiTap{
  background:rgba(135,102,235,.13)!important;
  border-color:rgba(135,102,235,.72)!important;
}

/* Strong, accessible keyboard focus. */
button:focus-visible{
  outline:3px solid rgba(114,254,237,.72)!important;
  outline-offset:3px!important;
}

/* Persistent state: only true choices/toggles remain highlighted after release. */
button.is-selected,
button[aria-pressed="true"]{
  border-color:var(--mj-primary)!important;
  box-shadow:
    0 0 0 1px var(--mj-primary) inset,
    0 7px 20px rgba(135,102,235,.13)!important;
}

button.secondary.is-selected,
button.secondary[aria-pressed="true"],
.optionBtn.is-selected,
.optionBtn[aria-pressed="true"]{
  background:rgba(135,102,235,.18)!important;
  color:#fff!important;
}

/* Calendar enable state: it remains visibly selected only while Calendar is enabled. */
#enableCalendarRemindersBtn[aria-pressed="true"]{
  background:var(--mj-primary)!important;
  color:#fff!important;
  border-color:var(--mj-primary)!important;
  box-shadow:
    0 0 0 2px rgba(135,102,235,.25),
    inset 0 -3px 0 var(--mj-highlight)!important;
}
#syncCalendarRemindersBtn.is-available{
  border-color:rgba(114,254,237,.28)!important;
}

/* Checkbox/radio selections also need a visible container change. */
.calendarCategoryGrid label:has(input:checked),
.triggerGrid label:has(input:checked),
.toggleRow:has(input:checked){
  background:rgba(135,102,235,.14)!important;
  border-color:rgba(135,102,235,.82)!important;
  box-shadow:0 0 0 1px rgba(135,102,235,.12) inset!important;
}
input[type="checkbox"],
input[type="radio"]{
  accent-color:var(--mj-primary)!important;
}

/* Keep the already-approved dock dimensions and typography exactly as-is.
   Only add touch feedback without overriding its selected sizing rules. */
#bottomNav button:enabled:active,
#bottomNav button:enabled.uiTap{
  filter:brightness(1.10)!important;
}

/* Severity remains the deliberate lime-only selected exception. */
#migSeverityButtons > button.selected,
#migSeverityButtons > button[aria-pressed="true"],
#migUpdateSeverityButtons > button.selected,
#migUpdateSeverityButtons > button[aria-pressed="true"],
#sleepQuality > button.selected,
#sleepQuality > button[aria-pressed="true"]{
  background:var(--mj-highlight)!important;
  color:#17181F!important;
  border-color:var(--mj-highlight)!important;
  box-shadow:0 0 0 2px rgba(236,254,114,.16)!important;
}


/* ==========================================================================
   v1.0 Button Interaction Audit — patch 1
   Screenshot corrections: exact severity lime + neutral Calendar actions + alignment.
   ========================================================================== */

/* Selected 1–5 controls are a deliberate exception:
   the tap animation must NEVER darken the approved lime fill. */
#migSeverityButtons > button.selected,
#migSeverityButtons > button.selected.uiTap,
#migSeverityButtons > button[aria-pressed="true"],
#migSeverityButtons > button[aria-pressed="true"].uiTap,
#migUpdateSeverityButtons > button.selected,
#migUpdateSeverityButtons > button.selected.uiTap,
#migUpdateSeverityButtons > button[aria-pressed="true"],
#migUpdateSeverityButtons > button[aria-pressed="true"].uiTap,
#sleepQuality > button.selected,
#sleepQuality > button.selected.uiTap,
#sleepQuality > button[aria-pressed="true"],
#sleepQuality > button[aria-pressed="true"].uiTap{
  background:#ECFE72!important;
  background-image:none!important;
  color:#17181F!important;
  border-color:#ECFE72!important;
  filter:none!important;
  box-shadow:0 0 0 2px rgba(236,254,114,.16)!important;
}

/* Calendar action buttons are commands, not choices.
   Enabled Calendar state is communicated by the status chip and a restrained edge,
   never by a large permanent purple fill. */
#enableCalendarRemindersBtn,
#enableCalendarRemindersBtn[aria-pressed="true"],
#syncCalendarRemindersBtn,
#disableCalendarRemindersBtn{
  background:var(--mj-surface)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}

#enableCalendarRemindersBtn[aria-pressed="true"]{
  border-color:rgba(135,102,235,.72)!important;
  border-inline-start:3px solid var(--mj-primary)!important;
  box-shadow:inset 0 0 0 1px rgba(135,102,235,.08)!important;
}

#syncCalendarRemindersBtn.is-available{
  border-color:rgba(114,254,237,.35)!important;
  border-inline-start:3px solid var(--mj-aqua)!important;
}

/* The destructive test cleanup action remains neutral with a coral danger rail. */
#cleanupTestCalendarBtn{
  background:var(--mj-surface)!important;
  color:#FFFFFF!important;
  border:1px solid rgba(255,112,67,.24)!important;
  border-inline-start:3px solid var(--mj-danger)!important;
  box-shadow:none!important;
}

/* Balanced Arabic layout:
   row 1 = Enable + Update
   row 2 = Stop sync (full width)
   row 3 = End test / delete calendar (full width) */
.calendarActionGrid{
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  align-items:stretch!important;
}
#disableCalendarRemindersBtn,
#cleanupTestCalendarBtn{
  grid-column:1 / -1!important;
  width:100%!important;
  min-height:58px!important;
}
#cleanupTestCalendarBtn{
  text-align:center!important;
  white-space:normal!important;
  line-height:1.45!important;
}

@media(max-width:520px){
  .calendarActionGrid{grid-template-columns:1fr!important}
  #disableCalendarRemindersBtn,
  #cleanupTestCalendarBtn{grid-column:auto!important}
}


/* ==========================================================================
   v1.0 Button Interaction Audit — patch 2
   Fix transient-state QA: neutral actions use motion/border feedback;
   selected severity snaps immediately to exact lime.
   ========================================================================== */

/* Exact selected severity must be stable immediately after selection.
   Do not animate background/filter into the selected state. */
#migSeverityButtons > button.selected,
#migSeverityButtons > button.selected.uiTap,
#migSeverityButtons > button[aria-pressed="true"],
#migSeverityButtons > button[aria-pressed="true"].uiTap,
#migUpdateSeverityButtons > button.selected,
#migUpdateSeverityButtons > button.selected.uiTap,
#migUpdateSeverityButtons > button[aria-pressed="true"],
#migUpdateSeverityButtons > button[aria-pressed="true"].uiTap,
#sleepQuality > button.selected,
#sleepQuality > button.selected.uiTap,
#sleepQuality > button[aria-pressed="true"],
#sleepQuality > button[aria-pressed="true"].uiTap{
  background-color:#ECFE72!important;
  background:#ECFE72!important;
  color:#17181F!important;
  border-color:#ECFE72!important;
  filter:none!important;
  transition:
    transform .10s ease,
    border-color 0s,
    box-shadow .10s ease,
    color 0s,
    background-color 0s,
    filter 0s!important;
}

/* Neutral Calendar commands intentionally keep charcoal fill during a press.
   Their feedback is movement + brighter border/ring, not a misleading purple fill. */
#enableCalendarRemindersBtn:enabled.uiTap,
#enableCalendarRemindersBtn:enabled:active,
#syncCalendarRemindersBtn:enabled.uiTap,
#syncCalendarRemindersBtn:enabled:active,
#disableCalendarRemindersBtn:enabled.uiTap,
#disableCalendarRemindersBtn:enabled:active,
#cleanupTestCalendarBtn:enabled.uiTap,
#cleanupTestCalendarBtn:enabled:active{
  background:var(--mj-surface)!important;
  border-color:rgba(114,254,237,.78)!important;
  transform:scale(.975)!important;
  filter:brightness(1.13)!important;
  box-shadow:
    0 0 0 2px rgba(114,254,237,.18) inset,
    0 5px 14px rgba(0,0,0,.18)!important;
}

#cleanupTestCalendarBtn:enabled.uiTap,
#cleanupTestCalendarBtn:enabled:active{
  border-color:rgba(255,112,67,.82)!important;
  box-shadow:
    0 0 0 2px rgba(255,112,67,.16) inset,
    0 5px 14px rgba(0,0,0,.18)!important;
}


/* ==========================================================================
   v1.0 UI consistency + reminder visibility patch
   ========================================================================== */

/* In-app reminders are visible on Today, not only emitted as transient toasts. */
.inAppReminderSurface{margin:10px 0 14px}
.inAppReminderList{display:grid;gap:8px}
.inAppReminderItem{
  display:grid;grid-template-columns:30px minmax(0,1fr);gap:9px;align-items:center;
  padding:10px 12px;border-radius:15px;background:var(--mj-surface);
  border:1px solid rgba(255,255,255,.06);border-inline-start:3px solid var(--mj-highlight)
}
.inAppReminderItem.error{border-inline-start-color:var(--mj-danger)}
.inAppReminderItem p{margin:0;line-height:1.55}
.inAppReminderItem>span{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:var(--mj-surface2)}

/* Cloud connect/sign-in are commands, never a permanent purple selected state. */
#connectGoogleBtn,
#googleSignInBtn,
#googleSignOutBtn{
  background:var(--mj-surface)!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
}
#connectGoogleBtn:enabled.uiTap,
#googleSignInBtn:enabled.uiTap,
#googleSignOutBtn:enabled.uiTap{
  border-color:rgba(114,254,237,.76)!important;
}

/* Accurate sync summary: green only when queue is actually zero and online. */
#syncQueueSummary.syncAllClear{
  border-color:rgba(74,192,103,.28)!important;
  color:#DFF8E5!important;
}
#globalSyncStatus .statusDot{
  width:8px;height:8px;border-radius:50%;display:inline-block;background:var(--mj-highlight);margin-inline-end:7px
}
#globalSyncStatus.allClear .statusDot{background:var(--mj-success)!important}
#globalSyncStatus.allClear{border-color:rgba(74,192,103,.25)!important}
#globalSyncStatus.hasPending .statusDot{background:var(--mj-highlight)!important}

/* Quick-add FAB must stay fixed and centered; do not allow tap transforms to shift it. */
#quickAddFab{
  transform:none!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
}
#quickAddFab::before{
  inset:0!important;
  width:100%!important;height:100%!important;
  display:grid!important;place-items:center!important;
  transform:translateY(1px)!important;
}
#quickAddFab.uiTap,
#quickAddFab:active{
  transform:none!important;
  filter:brightness(1.08)!important;
}
#quickAddFab.quickAddOpen{
  box-shadow:0 0 0 3px rgba(135,102,235,.18),0 8px 22px rgba(0,0,0,.35)!important;
}

/* Toast close glyph centered geometrically. */
.toastClose{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
  text-align:center!important;
}
.toastClose::first-letter{line-height:1!important}

/* Generic close buttons in dialogs. */
.closeBtn{
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
}

/* Cloud account actions */
.cloudAccountActions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.cloudAccountActions button[hidden]{display:none!important}
@media(max-width:520px){.cloudAccountActions{grid-template-columns:1fr}}


/* ==========================================================================
   v1.0 UI Consistency patch v1 — grounded DOM fixes
   ========================================================================== */

/* The FAB center must be exactly the viewport/dock center.
   Use left:50% + translateX(-50%) consistently; never override transform to none. */
#quickAddFab{
  left:50%!important;
  right:auto!important;
  transform:translateX(-50%)!important;
  margin:0!important;
}
#quickAddFab.uiTap,
#quickAddFab:active,
#quickAddFab.quickAddOpen{
  transform:translateX(-50%)!important;
}

/* The + glyph itself stays optically centered inside the circle. */
#quickAddFab::before{
  transform:translateY(1px)!important;
}

/* Eye: use the existing eye glyph and draw a real slash only while hidden.
   This avoids unreliable platform emoji variants. */
#eye{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  padding:0!important;
  line-height:1!important;
}
#eye::after{
  content:""!important;
  position:absolute!important;
  width:23px!important;
  height:2px!important;
  border-radius:999px!important;
  background:#FFFFFF!important;
  transform:rotate(-43deg)!important;
  opacity:1!important;
  pointer-events:none!important;
  box-shadow:0 0 0 1px rgba(23,24,31,.45)!important;
}
#eye[data-visible="true"]::after{
  opacity:0!important;
}

/* Quick-add dialog should always sit above the dock/FAB when open. */
#quickAddDialog{
  z-index:180!important;
}


/* ==========================================================================
   v1.0 Profile isolation + Cloud alignment
   ========================================================================== */

/* Prevent even a brief sensitive-data flash before identity verification. */
html.profile-boot-locked #appShell,
html.profile-boot-locked #bottomNav,
html.profile-boot-locked #quickAddFab{
  visibility:hidden!important;
  pointer-events:none!important;
}
html.profile-boot-locked #profileGuard{
  display:grid!important;
}

/* Cloud actions: one coherent geometry, no dangling fourth button. */
.cloudAccountActions{
  grid-template-columns:1fr!important;
}
.cloudAccountActions button{
  width:100%!important;
  min-height:56px!important;
}

.cloudActions{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:10px!important;
  align-items:stretch!important;
}
.cloudActions #syncNowBtn,
.cloudActions #disconnectGoogleBtn{
  width:100%!important;
  min-height:58px!important;
}
.cloudActions #unbindProfileBtn{
  grid-column:1/-1!important;
  width:100%!important;
  min-height:58px!important;
}
.cloudActions .legacyCloudConnect{
  display:none!important;
}

#unbindProfileBtn{
  border-inline-start:3px solid var(--mj-danger)!important;
  background:var(--mj-surface)!important;
  color:#fff!important;
}

@media(max-width:520px){
  .cloudActions{grid-template-columns:1fr!important}
  .cloudActions #unbindProfileBtn{grid-column:auto!important}
}


/* v1.0 Privacy + Account Switch */
.profileGuardCard #profileGuardReconnectBtn{background:var(--mj-primary)!important}
.cloudAccountActions{grid-template-columns:1fr 1fr!important}
#switchGoogleAccountBtn{border-inline-start:3px solid var(--mj-primary)!important}
@media(max-width:520px){.cloudAccountActions{grid-template-columns:1fr!important}}

.privacyPanel{margin-top:12px;padding:13px;border-radius:18px;background:var(--mj-surface2);border:1px solid rgba(255,255,255,.06)}
.privacyPinGrid,.privacyActionGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.privacyLockScreen{position:fixed;inset:0;z-index:20000;display:grid;place-items:center;padding:22px;background:rgba(23,24,31,.985)}
.privacyLockScreen[hidden]{display:none!important}
.privacyLockCard{width:min(420px,100%);padding:24px;border-radius:26px;background:var(--mj-surface);border:1px solid rgba(255,255,255,.08);text-align:center}
.privacyLockCard input{margin:12px 0;width:100%;text-align:center;letter-spacing:.28em;font-size:1.15rem}
.privacyLockCard button{width:100%}
.privacyUnlockMessage{color:var(--mj-danger);min-height:1.4em}
body.privacy-pin-locked #appShell,
body.privacy-pin-locked #bottomNav,
body.privacy-pin-locked #quickAddFab{visibility:hidden!important;pointer-events:none!important}
body.privacy-background-hidden .sensitive,
body.privacy-background-hidden [data-sensitive],
body.privacy-background-hidden .photoCard img{filter:blur(18px)!important;opacity:.25!important}
@media(max-width:520px){.privacyPinGrid,.privacyActionGrid{grid-template-columns:1fr}}


/* v1.0 regression harmonization — explicit semantic selectors.
   Avoid nth-child drift when More rows are added/reordered. */
#view-more #resetBtn::before{
  background:var(--mj-danger)!important;
}
#view-more #resetBtn>span{
  color:var(--mj-danger)!important;
}


/* v1.0 Privacy + IndexedDB Ownership Hardening */
html.privacy-boot-locked #appShell,
html.privacy-boot-locked #bottomNav,
html.privacy-boot-locked #quickAddFab{
  visibility:hidden!important;
  pointer-events:none!important;
}
body.privacy-background-hidden #dailyWeightStatus,
body.privacy-background-hidden [data-card="weight"],
body.privacy-background-hidden [data-daily-feature="weight"],
body.privacy-background-hidden .photoCard img,
body.privacy-background-hidden [data-sensitive-photo]{
  filter:blur(18px)!important;
  opacity:.22!important;
}

#profileGuardRecoverBtn{margin-top:10px;width:100%}


/* v1.0 Live validation fixes — sync, progress ring, secondary-view header */
#globalSyncStatus.hasPending .statusDot{
  background:var(--mj-highlight)!important;
  animation:mjPulse 1.1s ease-in-out infinite!important;
  transform-origin:center;
}
#globalSyncStatus.syncPaused .statusDot{background:var(--mj-highlight)!important}
#globalSyncStatus.syncOffline .statusDot{background:var(--mj-muted)!important;animation:none!important}

/* The renderer drives --p; keep the approved green completion arc visible. */
#ring.ring{
  background:conic-gradient(var(--mj-success) var(--p,0%),var(--mj-elevated) var(--p,0%))!important;
}

/* Secondary destinations already have their own viewIntro title/subtitle.
   Keep global tools, but suppress the duplicated global title/motivation block. */
body[data-active-view="today"] .appHeader>div:first-child,
body[data-active-view="progress"] .appHeader>div:first-child,
body[data-active-view="analytics"] .appHeader>div:first-child,
body[data-active-view="more"] .appHeader>div:first-child{
  display:none!important;
}
body[data-active-view="today"] .appHeader,
body[data-active-view="progress"] .appHeader,
body[data-active-view="analytics"] .appHeader,
body[data-active-view="more"] .appHeader{
  grid-template-columns:minmax(0,1fr) auto!important;
  min-height:42px!important;
  margin-bottom:6px!important;
}
body[data-active-view="today"] .appHeader .headerTools,
body[data-active-view="progress"] .appHeader .headerTools,
body[data-active-view="analytics"] .appHeader .headerTools,
body[data-active-view="more"] .appHeader .headerTools{
  grid-column:2!important;
  justify-self:end!important;
}