:root {
      --bg: #07111f;
      --bg-soft: #0b1b30;
      --panel: rgba(17, 35, 63, .90);
      --panel-soft: rgba(9, 24, 43, .88);
      --line: rgba(255,255,255,.11);
      --line-strong: rgba(255,255,255,.18);
      --text: #f6f9fc;
      --muted: #a7b8cb;
      --yellow: #f2c94c;
      --blue: #5aa9ff;
      --cyan: #68d6dc;
      --green: #72d5a0;
      --orange: #ffbd73;
      --red: #ff8585;
      --shadow: 0 24px 65px rgba(0,0,0,.32);
      --radius: 22px;
      --radius-sm: 14px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; }
    body {
      margin: 0;
      min-height: 100vh;
      color: var(--text);
      font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 8% 0%, rgba(90,169,255,.16), transparent 30%),
        radial-gradient(circle at 95% 5%, rgba(242,201,76,.12), transparent 25%),
        linear-gradient(145deg, #050c16, var(--bg) 45%, #0d243f);
    }

    button, input, select, textarea { font: inherit; }
    button { -webkit-tap-highlight-color: transparent; }

    .hidden { display: none !important; }

    .melfit-site-link {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      margin-bottom: 18px;
      color: var(--muted);
      font-size: .75rem;
      font-weight: 800;
      text-decoration: none;
    }

    .melfit-site-link:hover { color: var(--text); }

    @media (min-width: 783px) {
      .admin-bar .sidebar { top: 32px; height: calc(100vh - 32px); }
    }

    @media (max-width: 782px) {
      .admin-bar .mobile-nav { bottom: 10px; }
    }
    .positive { color: var(--green) !important; }
    .negative { color: var(--red) !important; }
    .warning { color: var(--orange) !important; }

    /* LOGIN */
    .login-shell {
      min-height: 100vh;
      display: grid;
      place-items: center;
      padding: 24px;
    }

    .login-card {
      width: min(980px, 100%);
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      border: 1px solid var(--line);
      border-radius: 30px;
      overflow: hidden;
      background: rgba(8, 22, 40, .91);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .login-brand {
      position: relative;
      min-height: 590px;
      padding: 48px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      overflow: hidden;
      background:
        radial-gradient(circle at 80% 15%, rgba(242,201,76,.20), transparent 26%),
        radial-gradient(circle at 5% 80%, rgba(90,169,255,.22), transparent 33%),
        linear-gradient(145deg, #10294a, #0a192d 65%);
    }

    .login-brand::after {
      content: "";
      position: absolute;
      width: 380px;
      height: 380px;
      right: -190px;
      bottom: -190px;
      border: 70px solid rgba(255,255,255,.035);
      border-radius: 50%;
    }

    .brand-mark {
      position: relative;
      z-index: 1;
      display: inline-flex;
      align-items: center;
      gap: 11px;
      font-weight: 950;
      font-size: 1.2rem;
      letter-spacing: -.02em;
    }

    .brand-logo {
      width: 42px;
      height: 42px;
      display: grid;
      place-items: center;
      border-radius: 13px;
      color: #06101c;
      background: var(--yellow);
      font-weight: 950;
    }

    .login-copy { position: relative; z-index: 1; }
    .eyebrow {
      margin: 0 0 9px;
      color: var(--yellow);
      font-size: .74rem;
      font-weight: 900;
      letter-spacing: .18em;
      text-transform: uppercase;
    }

    .login-copy h1 {
      margin: 0;
      max-width: 520px;
      font-size: clamp(2.4rem, 6vw, 4.7rem);
      line-height: .94;
      letter-spacing: -.065em;
    }

    .login-copy p {
      max-width: 510px;
      margin: 18px 0 0;
      color: #b9c8d8;
      line-height: 1.65;
    }

    .login-features {
      position: relative;
      z-index: 1;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
    }

    .login-feature {
      padding: 8px 11px;
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 999px;
      color: #c6d2df;
      background: rgba(255,255,255,.045);
      font-size: .72rem;
      font-weight: 800;
    }

    .login-form-wrap {
      padding: 48px 42px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .login-form-wrap h2 {
      margin: 0;
      font-size: 1.8rem;
      letter-spacing: -.035em;
    }

    .login-form-wrap > p {
      margin: 9px 0 24px;
      color: var(--muted);
      line-height: 1.5;
      font-size: .86rem;
    }

    .account-select {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 18px;
    }

    .account-card {
      position: relative;
      padding: 16px;
      border: 1px solid var(--line);
      border-radius: 16px;
      color: var(--text);
      background: rgba(255,255,255,.035);
      cursor: pointer;
      text-align: left;
      transition: .18s ease;
    }

    .account-card:hover,
    .account-card.selected {
      transform: translateY(-2px);
      border-color: rgba(242,201,76,.45);
      background: rgba(242,201,76,.075);
    }

    .account-avatar {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      margin-bottom: 10px;
      border-radius: 12px;
      color: #07111f;
      background: var(--yellow);
      font-weight: 950;
    }

    .account-card strong { display: block; }
    .account-card small { color: var(--muted); }

    .field { margin-bottom: 13px; }
    label {
      display: block;
      margin: 0 0 7px;
      color: var(--muted);
      font-size: .73rem;
      font-weight: 850;
    }

    input, select, textarea {
      width: 100%;
      min-width: 0;
      padding: 12px 13px;
      border: 1px solid var(--line);
      border-radius: 12px;
      outline: 0;
      color: var(--text);
      background: rgba(4, 14, 26, .70);
      transition: .18s ease;
    }

    input:focus, select:focus, textarea:focus {
      border-color: rgba(90,169,255,.75);
      box-shadow: 0 0 0 4px rgba(90,169,255,.10);
    }

    select option { color: #111; background: #fff; }
    textarea { resize: vertical; min-height: 80px; }

    .btn {
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px 14px;
      color: var(--text);
      background: rgba(255,255,255,.045);
      cursor: pointer;
      font-weight: 800;
      transition: .18s ease;
    }

    .btn:hover {
      transform: translateY(-1px);
      border-color: var(--line-strong);
      background: rgba(255,255,255,.075);
    }

    .btn.primary {
      color: #07111f;
      border-color: var(--yellow);
      background: var(--yellow);
      font-weight: 950;
    }

    .btn.blue {
      color: white;
      border-color: rgba(90,169,255,.55);
      background: rgba(90,169,255,.18);
    }

    .btn.danger { color: #ffc7c7; }
    .btn.small { padding: 8px 10px; font-size: .72rem; }
    .btn.block { width: 100%; }

    .login-error {
      min-height: 20px;
      margin-top: 10px;
      color: var(--red);
      font-size: .76rem;
      text-align: center;
    }

    .demo-note {
      margin-top: 15px;
      padding: 11px 12px;
      border-left: 3px solid var(--yellow);
      border-radius: 0 10px 10px 0;
      color: var(--muted);
      background: rgba(255,255,255,.035);
      font-size: .71rem;
      line-height: 1.5;
    }

    /* APP LAYOUT */
    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 250px minmax(0,1fr);
    }

    .sidebar {
      position: sticky;
      top: 0;
      height: 100vh;
      padding: 22px 16px;
      border-right: 1px solid var(--line);
      background: rgba(5, 15, 27, .90);
      backdrop-filter: blur(16px);
      z-index: 20;
    }

    .sidebar-brand {
      display: flex;
      align-items: center;
      gap: 10px;
      margin: 2px 5px 25px;
      font-weight: 950;
      font-size: 1.05rem;
    }

    .sidebar-brand .brand-logo {
      width: 36px;
      height: 36px;
      border-radius: 11px;
    }

    .nav {
      display: grid;
      gap: 5px;
    }

    .nav-btn {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 11px;
      padding: 11px 12px;
      border: 1px solid transparent;
      border-radius: 12px;
      color: var(--muted);
      background: transparent;
      cursor: pointer;
      text-align: left;
      font-weight: 800;
      transition: .18s ease;
    }

    .nav-btn:hover,
    .nav-btn.active {
      color: var(--text);
      border-color: var(--line);
      background: rgba(255,255,255,.05);
    }

    .nav-icon {
      width: 26px;
      text-align: center;
      font-size: 1rem;
    }

    .sidebar-user {
      position: absolute;
      left: 16px;
      right: 16px;
      bottom: 18px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,255,255,.035);
    }

    .sidebar-user-main {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 10px;
    }

    .user-avatar {
      width: 36px;
      height: 36px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      color: #07111f;
      background: var(--yellow);
      font-weight: 950;
    }

    .sidebar-user strong { display: block; }
    .sidebar-user small { color: var(--muted); }

    .main {
      min-width: 0;
      padding: 24px 26px 44px;
    }

    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      margin-bottom: 20px;
    }

    .topbar h1 {
      margin: 0;
      font-size: clamp(1.8rem, 4vw, 3.1rem);
      line-height: 1;
      letter-spacing: -.055em;
    }

    .topbar p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: .83rem;
    }

    .topbar-actions {
      display: flex;
      align-items: center;
      gap: 9px;
    }

    .date-control {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 185px;
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.035);
    }

    .date-control input {
      padding: 0;
      border: 0;
      background: transparent;
      box-shadow: none;
    }

    .page { display: none; }
    .page.active { display: block; }

    .panel {
      padding: 19px;
      border: 1px solid var(--line);
      border-radius: var(--radius);
      background: linear-gradient(180deg, rgba(255,255,255,.025), rgba(255,255,255,.01)), var(--panel);
      box-shadow: var(--shadow);
    }

    .panel + .panel { margin-top: 16px; }

    .panel-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      margin-bottom: 14px;
    }

    .panel-head h2 {
      margin: 0;
      font-size: 1.08rem;
      letter-spacing: -.02em;
    }

    .panel-head p,
    .panel-head small {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .72rem;
    }

    .grid { display: grid; gap: 15px; }
    .grid.two { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .grid.sidebar-main { grid-template-columns: .78fr 1.22fr; }
    .grid.main-sidebar { grid-template-columns: 1.25fr .75fr; }

    /* KPI */
    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(5, minmax(0,1fr));
      gap: 11px;
      margin-bottom: 16px;
    }

    .kpi {
      min-height: 120px;
      padding: 15px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(255,255,255,.035);
    }

    .kpi.highlight {
      border-color: rgba(242,201,76,.28);
      background: linear-gradient(145deg, rgba(242,201,76,.11), rgba(90,169,255,.06));
    }

    .kpi-label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 850;
      line-height: 1.3;
    }

    .kpi-icon {
      width: 27px;
      height: 27px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      background: rgba(255,255,255,.06);
      font-size: .78rem;
    }

    .kpi-value {
      margin-top: 13px;
      font-size: clamp(1.45rem, 3vw, 2rem);
      line-height: 1;
      font-weight: 950;
      letter-spacing: -.045em;
    }

    .kpi-value small {
      margin-left: 4px;
      color: var(--muted);
      font-size: .68rem;
      font-weight: 800;
      letter-spacing: 0;
    }

    .kpi-sub {
      margin-top: 7px;
      color: var(--muted);
      font-size: .66rem;
      line-height: 1.35;
    }

    /* RINGS */
    .rings {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 12px;
    }

    .ring-card {
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(255,255,255,.025);
      text-align: center;
    }

    .ring {
      --pct: 0;
      --ring-color: var(--blue);
      position: relative;
      width: 92px;
      height: 92px;
      display: grid;
      place-items: center;
      margin: 0 auto 10px;
      border-radius: 50%;
      background: conic-gradient(var(--ring-color) calc(var(--pct) * 1%), rgba(255,255,255,.08) 0);
    }

    .ring::before {
      content: "";
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: #0c1d33;
    }

    .ring-value {
      position: absolute;
      font-weight: 950;
      font-size: .95rem;
    }

    .ring-card strong {
      display: block;
      font-size: .78rem;
    }

    .ring-card small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: .65rem;
    }

    /* QUICK INPUT */
    .form-grid {
      display: grid;
      grid-template-columns: repeat(2, minmax(0,1fr));
      gap: 11px;
    }

    .form-grid.three { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .form-grid.four { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .full { grid-column: 1 / -1; }

    .input-card {
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.025);
    }

    .save-state {
      min-height: 20px;
      margin-top: 8px;
      color: var(--green);
      font-size: .7rem;
    }

    /* CHARTS */
    .chart-wrap {
      position: relative;
      min-height: 270px;
      overflow: hidden;
      border: 1px solid var(--line);
      border-radius: 15px;
      background: rgba(3, 12, 23, .50);
    }

    canvas {
      width: 100%;
      height: 270px;
      display: block;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin-top: 10px;
      color: var(--muted);
      font-size: .68rem;
    }

    .legend-item { display: inline-flex; align-items: center; gap: 6px; }
    .legend-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--blue); }
    .legend-dot.yellow { background: var(--yellow); }
    .legend-dot.green { background: var(--green); }

    /* CHALLENGE SNAPSHOT */
    .leader-card {
      padding: 14px;
      border: 1px solid rgba(242,201,76,.22);
      border-radius: 16px;
      background: rgba(242,201,76,.055);
    }

    .leader-row {
      display: grid;
      grid-template-columns: 30px minmax(0,1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 11px 0;
      border-bottom: 1px solid var(--line);
    }

    .leader-row:last-child { border-bottom: 0; }
    .rank {
      width: 29px;
      height: 29px;
      display: grid;
      place-items: center;
      border-radius: 9px;
      color: var(--yellow);
      background: rgba(255,255,255,.06);
      font-weight: 950;
      font-size: .77rem;
    }

    .leader-name { margin-bottom: 5px; font-size: .79rem; font-weight: 900; }
    .leader-track { height: 7px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
    .leader-fill { width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--blue), var(--yellow)); }
    .leader-points { text-align: right; font-weight: 950; }
    .leader-points small { display: block; color: var(--muted); font-size: .62rem; }

    .mission {
      margin-top: 12px;
      padding: 13px;
      border: 1px solid rgba(90,169,255,.22);
      border-radius: 14px;
      background: rgba(90,169,255,.055);
    }

    .mission strong { display: block; }
    .mission p { margin: 6px 0 0; color: var(--muted); font-size: .72rem; line-height: 1.45; }

    /* FOOD */
    .food-layout {
      display: grid;
      grid-template-columns: .82fr 1.18fr;
      gap: 16px;
      align-items: start;
    }

    .food-entry-panel,
    .food-diary-panel {
      min-width: 0;
    }

    .food-diary-panel {
      position: sticky;
      top: 18px;
    }

    .search-row {
      display: grid;
      grid-template-columns: minmax(0,1fr) 118px 145px;
      gap: 9px;
      align-items: end;
    }

    .food-search-main { min-width: 0; }

    .input-suffix {
      position: relative;
    }

    .input-suffix input { padding-right: 34px; }

    .input-suffix span {
      position: absolute;
      right: 12px;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
      font-size: .67rem;
      font-weight: 850;
      pointer-events: none;
    }

    .food-search-note {
      margin-top: 8px;
      color: var(--muted);
      font-size: .66rem;
      line-height: 1.45;
    }

    .food-results {
      display: grid;
      gap: 9px;
      max-height: 430px;
      overflow: auto;
      padding-right: 4px;
      margin-top: 13px;
    }

    .food-result {
      display: grid;
      grid-template-columns: minmax(0,1fr) auto;
      gap: 12px;
      align-items: center;
      padding: 12px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.028);
      transition: .18s ease;
    }

    .food-result:hover {
      border-color: rgba(90,169,255,.26);
      background: rgba(90,169,255,.045);
    }

    .food-result strong {
      display: block;
      font-size: .83rem;
    }

    .food-result small {
      display: block;
      margin-top: 3px;
      color: var(--muted);
      font-size: .64rem;
      line-height: 1.4;
    }

    .food-result-kcal {
      color: var(--yellow);
      font-weight: 950;
    }

    .macro-chips {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 7px;
    }

    .chip {
      padding: 5px 7px;
      border-radius: 999px;
      color: #c8d5e2;
      background: rgba(255,255,255,.055);
      font-size: .61rem;
      font-weight: 850;
    }

    .chip.protein { background: rgba(242,201,76,.09); color: #f8dfa0; }
    .chip.carbs { background: rgba(90,169,255,.09); color: #bddcff; }
    .chip.fat { background: rgba(255,189,115,.09); color: #ffd2a3; }

    .food-budget-card {
      margin-bottom: 12px;
      padding: 14px;
      border: 1px solid rgba(90,169,255,.22);
      border-radius: 15px;
      background:
        radial-gradient(circle at 100% 0%, rgba(90,169,255,.10), transparent 35%),
        rgba(90,169,255,.035);
    }

    .food-budget-head {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 12px;
      margin-bottom: 9px;
    }

    .food-budget-head span {
      color: var(--muted);
      font-size: .68rem;
      font-weight: 800;
    }

    .food-budget-head strong {
      font-size: .82rem;
    }

    .food-progress-track {
      height: 10px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
    }

    .food-progress-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: linear-gradient(90deg, var(--blue), var(--yellow));
      transition: width .25s ease;
    }

    .food-progress-bar.over {
      background: linear-gradient(90deg, var(--orange), var(--red));
    }

    .food-day-summary {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .food-total {
      min-height: 82px;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.025);
    }

    .food-total.highlight {
      border-color: rgba(242,201,76,.22);
      background: rgba(242,201,76,.055);
    }

    .food-total span {
      color: var(--muted);
      font-size: .64rem;
      font-weight: 800;
      line-height: 1.3;
    }

    .food-total strong {
      display: block;
      margin-top: 6px;
      font-size: 1.08rem;
      letter-spacing: -.025em;
    }

    .food-total small {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: .58rem;
    }

    .macro-progress-grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 8px;
      margin-bottom: 12px;
    }

    .macro-progress-card {
      padding: 10px;
      border: 1px solid var(--line);
      border-radius: 12px;
      background: rgba(255,255,255,.02);
    }

    .macro-progress-head {
      display: flex;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 7px;
      color: var(--muted);
      font-size: .61rem;
      font-weight: 800;
    }

    .macro-track {
      height: 7px;
      overflow: hidden;
      border-radius: 999px;
      background: rgba(255,255,255,.08);
    }

    .macro-bar {
      width: 0%;
      height: 100%;
      border-radius: inherit;
      background: var(--yellow);
      transition: width .25s ease;
    }

    .macro-bar.carbs { background: var(--blue); }
    .macro-bar.fat { background: var(--orange); }

    .meal-group {
      margin-bottom: 12px;
      border: 1px solid var(--line);
      border-radius: 15px;
      overflow: hidden;
      background: rgba(255,255,255,.018);
    }

    .meal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 11px 12px;
      border-bottom: 1px solid var(--line);
      background: rgba(255,255,255,.035);
    }

    .meal-head-title strong {
      display: block;
      font-size: .8rem;
    }

    .meal-head-title small {
      color: var(--muted);
      font-size: .59rem;
    }

    .meal-head-totals {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: 5px;
    }

    .meal-head-totals span {
      padding: 4px 6px;
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.05);
      font-size: .58rem;
      font-weight: 850;
    }

    .meal-head-totals .meal-head-kcal {
      color: var(--yellow);
      background: rgba(242,201,76,.08);
    }

    .meal-empty {
      padding: 19px 12px;
      color: var(--muted);
      font-size: .7rem;
      text-align: center;
    }

    .meal-item {
      padding: 12px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }

    .meal-item:last-child { border-bottom: 0; }

    .meal-item-top {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
    }

    .meal-item-name strong {
      display: block;
      font-size: .8rem;
      line-height: 1.3;
    }

    .meal-item-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 5px;
      margin-top: 5px;
    }

    .meal-meta-badge {
      padding: 4px 6px;
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.05);
      font-size: .57rem;
      font-weight: 800;
    }

    .meal-kcal {
      flex: 0 0 auto;
      color: var(--yellow);
      font-weight: 950;
      font-size: .86rem;
      white-space: nowrap;
    }

    .meal-nutrients {
      display: grid;
      grid-template-columns: repeat(3, minmax(0,1fr));
      gap: 7px;
      margin-top: 10px;
    }

    .meal-nutrient {
      padding: 8px;
      border: 1px solid rgba(255,255,255,.07);
      border-radius: 9px;
      background: rgba(255,255,255,.025);
    }

    .meal-nutrient span {
      display: block;
      color: var(--muted);
      font-size: .55rem;
      font-weight: 800;
    }

    .meal-nutrient strong {
      display: block;
      margin-top: 3px;
      font-size: .72rem;
    }

    .meal-item-foot {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-top: 9px;
    }

    .meal-daily-share {
      color: var(--muted);
      font-size: .6rem;
    }

    .meal-actions {
      display: flex;
      gap: 6px;
    }

    .meal-action {
      padding: 6px 8px;
      border: 1px solid var(--line);
      border-radius: 8px;
      color: var(--muted);
      background: rgba(255,255,255,.03);
      cursor: pointer;
      font-size: .58rem;
      font-weight: 850;
    }

    .meal-action:hover {
      color: var(--text);
      border-color: var(--line-strong);
    }

    .meal-action.delete { color: #ffc6c6; }

    .manual-box {
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--line);
    }

    @media (max-width: 1180px) {
      .food-diary-panel { position: static; }
    }

    @media (max-width: 720px) {
      .search-row { grid-template-columns: 1fr 105px; }
      .search-row > div:last-child { grid-column: 1 / -1; }
      .food-day-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .macro-progress-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 520px) {
      .food-result { grid-template-columns: 1fr; }
      .food-result .btn { width: 100%; }
      .meal-head { align-items: flex-start; flex-direction: column; }
      .meal-head-totals { justify-content: flex-start; }
      .meal-item-top { align-items: flex-start; }
      .meal-nutrients { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .meal-item-foot { align-items: flex-start; flex-direction: column; }
      .meal-actions { width: 100%; }
      .meal-action { flex: 1; }
    }

    /* PROGRESS */
    .stat-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0,1fr));
      gap: 10px;
    }

    .stat-card {
      min-height: 98px;
      padding: 13px;
      border: 1px solid var(--line);
      border-radius: 14px;
      background: rgba(255,255,255,.028);
    }

    .stat-card span { color: var(--muted); font-size: .67rem; font-weight: 800; line-height: 1.35; }
    .stat-card strong { display: block; margin-top: 8px; font-size: 1.25rem; letter-spacing: -.03em; }

    .milestone-list { display: grid; gap: 9px; }
    .milestone {
      display: grid;
      grid-template-columns: 38px minmax(0,1fr) auto;
      gap: 10px;
      align-items: center;
      padding: 11px;
      border: 1px solid var(--line);
      border-radius: 13px;
      background: rgba(255,255,255,.025);
    }

    .milestone-icon {
      width: 38px;
      height: 38px;
      display: grid;
      place-items: center;
      border-radius: 11px;
      background: rgba(255,255,255,.055);
    }

    .milestone strong { display: block; font-size: .78rem; }
    .milestone small { color: var(--muted); font-size: .64rem; }
    .milestone-state {
      padding: 5px 7px;
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.05);
      font-size: .6rem;
      font-weight: 900;
    }

    .milestone.unlocked {
      border-color: rgba(114,213,160,.25);
      background: rgba(114,213,160,.055);
    }

    .milestone.unlocked .milestone-state { color: var(--green); }

    .history-table {
      width: 100%;
      border-collapse: collapse;
      font-size: .72rem;
    }

    .history-table th,
    .history-table td {
      padding: 10px 9px;
      border-bottom: 1px solid var(--line);
      text-align: left;
      white-space: nowrap;
    }

    .history-table th { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
    .history-table td { color: #dbe5ef; }
    .history-scroll { overflow-x: auto; }

    /* CHALLENGE PAGE */
    .challenge-hero {
      position: relative;
      overflow: hidden;
      padding: 24px;
      border: 1px solid rgba(242,201,76,.23);
      border-radius: 22px;
      background:
        radial-gradient(circle at 90% 15%, rgba(242,201,76,.16), transparent 29%),
        radial-gradient(circle at 7% 100%, rgba(90,169,255,.14), transparent 32%),
        var(--panel);
      box-shadow: var(--shadow);
    }

    .challenge-hero h2 {
      margin: 0;
      font-size: clamp(1.8rem, 4vw, 3rem);
      letter-spacing: -.05em;
    }

    .challenge-hero p { max-width: 700px; margin: 10px 0 0; color: var(--muted); line-height: 1.55; }

    .challenge-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 16px;
    }

    .challenge-pill {
      padding: 8px 10px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: #dce6ef;
      background: rgba(255,255,255,.045);
      font-size: .68rem;
      font-weight: 850;
    }

    .challenge-scoreboard {
      display: grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 12px;
      align-items: stretch;
      margin-top: 16px;
    }

    .score-person {
      padding: 18px;
      border: 1px solid var(--line);
      border-radius: 17px;
      background: rgba(255,255,255,.03);
      text-align: center;
    }

    .score-person.leading {
      border-color: rgba(242,201,76,.35);
      background: rgba(242,201,76,.075);
    }

    .score-person .big-avatar {
      width: 50px;
      height: 50px;
      display: grid;
      place-items: center;
      margin: 0 auto 9px;
      border-radius: 15px;
      color: #07111f;
      background: var(--yellow);
      font-weight: 950;
      font-size: 1.12rem;
    }

    .score-person strong { display: block; }
    .score-number { margin-top: 10px; font-size: 2.2rem; font-weight: 950; letter-spacing: -.06em; }
    .score-number small { margin-left: 4px; color: var(--muted); font-size: .65rem; letter-spacing: 0; }

    .versus {
      display: grid;
      place-items: center;
      color: var(--muted);
      font-weight: 950;
      font-size: .73rem;
    }

    .badge-list { display: flex; flex-wrap: wrap; gap: 7px; }
    .badge {
      padding: 7px 9px;
      border: 1px solid var(--line);
      border-radius: 999px;
      color: var(--muted);
      background: rgba(255,255,255,.035);
      font-size: .65rem;
      font-weight: 850;
    }

    .badge.unlocked {
      color: var(--text);
      border-color: rgba(242,201,76,.28);
      background: rgba(242,201,76,.075);
    }

    /* SETTINGS */
    .settings-note {
      padding: 12px;
      border-left: 3px solid var(--yellow);
      border-radius: 0 11px 11px 0;
      color: var(--muted);
      background: rgba(255,255,255,.035);
      font-size: .72rem;
      line-height: 1.5;
    }

    .danger-zone {
      border-color: rgba(255,133,133,.22);
      background: rgba(255,133,133,.035);
    }

    .toast {
      position: fixed;
      right: 22px;
      bottom: 22px;
      z-index: 100;
      max-width: 360px;
      padding: 12px 14px;
      border: 1px solid var(--line);
      border-radius: 13px;
      color: var(--text);
      background: rgba(7,17,31,.96);
      box-shadow: var(--shadow);
      transform: translateY(18px);
      opacity: 0;
      pointer-events: none;
      transition: .22s ease;
      font-size: .76rem;
    }

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

    .mobile-nav { display: none; }

    @media (max-width: 1180px) {
      .kpi-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
      .grid.sidebar-main, .grid.main-sidebar, .food-layout { grid-template-columns: 1fr; }
    }

    @media (max-width: 900px) {
      .app-shell { grid-template-columns: 1fr; }
      .sidebar { display: none; }
      .main { padding-bottom: 92px; }
      .mobile-nav {
        position: fixed;
        left: 10px;
        right: 10px;
        bottom: 10px;
        z-index: 50;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 3px;
        padding: 6px;
        border: 1px solid var(--line);
        border-radius: 17px;
        background: rgba(5,15,27,.94);
        box-shadow: var(--shadow);
        backdrop-filter: blur(15px);
      }

      .mobile-nav .nav-btn {
        display: grid;
        justify-items: center;
        gap: 3px;
        padding: 8px 4px;
        font-size: .56rem;
        text-align: center;
      }

      .mobile-nav .nav-icon { font-size: .92rem; }
      .grid.two, .grid.three, .grid.four { grid-template-columns: 1fr 1fr; }
      .rings { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }

    @media (max-width: 720px) {
      .login-card { grid-template-columns: 1fr; }
      .login-brand { min-height: 340px; padding: 30px; }
      .login-form-wrap { padding: 30px; }
      .main { padding: 18px 13px 92px; }
      .topbar { align-items: flex-start; flex-direction: column; }
      .topbar-actions { width: 100%; }
      .date-control { flex: 1; }
      .kpi-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .stat-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .challenge-scoreboard { grid-template-columns: 1fr; }
      .versus { min-height: 20px; }
      .search-row { grid-template-columns: 1fr 90px; }
      .search-row select { grid-column: 1 / -1; }
    }

    @media (max-width: 520px) {
      .login-shell { padding: 10px; }
      .login-brand { min-height: 305px; padding: 24px; }
      .login-form-wrap { padding: 24px; }
      .account-select { grid-template-columns: 1fr 1fr; }
      .panel { padding: 14px; border-radius: 18px; }
      .kpi { min-height: 108px; padding: 12px; }
      .kpi-value { font-size: 1.45rem; }
      .grid.two, .grid.three, .grid.four, .form-grid, .form-grid.three, .form-grid.four { grid-template-columns: 1fr; }
      .food-day-summary { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .meal-item { grid-template-columns: minmax(0,1fr) auto auto; }
      .topbar-actions .btn { display: none; }
    }
    .step-quick-card {
      margin-bottom: 16px;
      padding: 18px;
      border: 1px solid rgba(90,169,255,.24);
      border-radius: 18px;
      background:
        radial-gradient(circle at 100% 0%, rgba(90,169,255,.12), transparent 32%),
        rgba(90,169,255,.045);
    }

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

    .step-quick-head h2 {
      margin: 0;
      font-size: 1rem;
    }

    .step-quick-head p {
      margin: 4px 0 0;
      color: var(--muted);
      font-size: .7rem;
    }

    .step-quick-layout {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 12px;
      align-items: stretch;
    }

    .step-number-wrap {
      position: relative;
      display: flex;
      align-items: center;
    }

    .step-number-wrap input {
      height: 58px;
      padding-right: 92px;
      font-size: 1.65rem;
      font-weight: 950;
      letter-spacing: -.04em;
      text-align: center;
      border-color: rgba(90,169,255,.30);
      background: rgba(4,14,26,.82);
    }

    .step-number-wrap span {
      position: absolute;
      right: 15px;
      color: var(--muted);
      font-size: .72rem;
      font-weight: 850;
      pointer-events: none;
    }

    .step-quick-actions {
      display: flex;
      gap: 8px;
    }

    .step-main-button {
      min-width: 150px;
      height: 58px;
    }

    .step-adjust-row {
      display: grid;
      grid-template-columns: repeat(6, minmax(0,1fr));
      gap: 7px;
      margin-top: 10px;
    }

    .step-adjust {
      padding: 9px 7px;
      border: 1px solid var(--line);
      border-radius: 10px;
      color: var(--text);
      background: rgba(255,255,255,.035);
      cursor: pointer;
      font-size: .72rem;
      font-weight: 900;
      transition: .18s ease;
    }

    .step-adjust:hover {
      border-color: rgba(90,169,255,.38);
      background: rgba(90,169,255,.08);
    }

    .step-quick-foot {
      display: flex;
      justify-content: space-between;
      gap: 10px;
      margin-top: 9px;
      color: var(--muted);
      font-size: .67rem;
    }

    @media (max-width: 720px) {
      .step-quick-layout { grid-template-columns: 1fr; }
      .step-main-button { width: 100%; min-width: 0; }
      .step-adjust-row { grid-template-columns: repeat(3, minmax(0,1fr)); }
    }


    /* MOBILE PWA */
    body { overscroll-behavior-y: none; }
    .main { padding-left: max(26px, env(safe-area-inset-left)); padding-right: max(26px, env(safe-area-inset-right)); }
    .app-install-card {
      padding: 15px;
      border: 1px solid rgba(90,169,255,.25);
      border-radius: 16px;
      background: linear-gradient(145deg, rgba(90,169,255,.10), rgba(242,201,76,.045));
    }
    .app-install-card h3 { margin: 0; font-size: .95rem; }
    .app-install-card p { margin: 7px 0 12px; color: var(--muted); font-size: .72rem; line-height: 1.5; }
    .app-status-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; font-size:.7rem; color:var(--muted); }
    .app-status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; margin-right:6px; background:var(--orange); }
    .app-status-dot.active { background:var(--green); box-shadow:0 0 12px rgba(114,213,160,.55); }

    /* SHARED CALENDAR */
    .calendar-toolbar {
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      margin-bottom:12px;
    }
    .calendar-toolbar h2 { margin:0; font-size:1.08rem; text-align:center; min-width:160px; }
    .calendar-toolbar-actions { display:flex; gap:7px; }
    .calendar-legend { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
    .calendar-legend-item { display:inline-flex; align-items:center; gap:6px; color:var(--muted); font-size:.65rem; font-weight:800; }
    .calendar-dot { width:8px; height:8px; border-radius:50%; background:var(--blue); }
    .calendar-dot.lea { background:var(--yellow); }
    .calendar-dot.steps { border-radius:3px; background:var(--green); }
    .calendar-dot.completed { background:var(--cyan); }
    .calendar-weekdays,
    .calendar-grid {
      display:grid;
      grid-template-columns:repeat(7,minmax(0,1fr));
      gap:6px;
    }
    .calendar-weekday { padding:6px 3px; color:var(--muted); font-size:.6rem; font-weight:900; text-align:center; text-transform:uppercase; }
    .calendar-day {
      position:relative;
      min-height:92px;
      padding:8px;
      border:1px solid var(--line);
      border-radius:12px;
      color:var(--text);
      background:rgba(255,255,255,.025);
      cursor:pointer;
      text-align:left;
      transition:.18s ease;
      overflow:hidden;
    }
    .calendar-day:hover,
    .calendar-day.selected { border-color:rgba(90,169,255,.42); background:rgba(90,169,255,.07); }
    .calendar-day.today { box-shadow:inset 0 0 0 1px rgba(242,201,76,.45); }
    .calendar-day.outside { opacity:.34; }
    .calendar-day-number { font-size:.72rem; font-weight:950; }
    .calendar-events { display:grid; gap:3px; margin-top:7px; }
    .calendar-event {
      overflow:hidden;
      padding:3px 5px;
      border-radius:6px;
      color:#eaf3fb;
      background:rgba(90,169,255,.16);
      font-size:.53rem;
      font-weight:850;
      white-space:nowrap;
      text-overflow:ellipsis;
    }
    .calendar-event.lea { color:#fff5c9; background:rgba(242,201,76,.16); }
    .calendar-event.goal { color:#d8ffe9; background:rgba(114,213,160,.14); }
    .calendar-event.done { color:#dffcff; background:rgba(104,214,220,.14); }
    .calendar-more { color:var(--muted); font-size:.52rem; margin-top:2px; }
    .calendar-day-details { display:grid; gap:9px; }
    .calendar-detail {
      display:grid;
      grid-template-columns:38px minmax(0,1fr) auto;
      gap:10px;
      align-items:center;
      padding:11px;
      border:1px solid var(--line);
      border-radius:13px;
      background:rgba(255,255,255,.025);
    }
    .calendar-detail-icon { width:38px; height:38px; display:grid; place-items:center; border-radius:11px; background:rgba(255,255,255,.055); }
    .calendar-detail strong { display:block; font-size:.76rem; }
    .calendar-detail small { display:block; margin-top:3px; color:var(--muted); font-size:.62rem; line-height:1.4; }
    .calendar-detail-actions { display:flex; gap:5px; }
    .calendar-empty { padding:24px 12px; color:var(--muted); font-size:.72rem; text-align:center; }
    .calendar-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-bottom:12px; }
    .calendar-summary-card { padding:11px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.025); }
    .calendar-summary-card span { color:var(--muted); font-size:.6rem; font-weight:800; }
    .calendar-summary-card strong { display:block; margin-top:5px; font-size:1rem; }

    .shared-goal-text {
      margin-top:13px;
      padding:14px;
      border:1px solid rgba(90,169,255,.20);
      border-radius:14px;
      color:#dbe9f5;
      background:rgba(90,169,255,.055);
      font-size:.78rem;
      line-height:1.55;
      white-space:pre-wrap;
    }

    @media (max-width: 900px) {
      .mobile-nav { grid-template-columns:repeat(6,1fr); }
      .main { padding-left:max(13px,env(safe-area-inset-left)); padding-right:max(13px,env(safe-area-inset-right)); padding-bottom:calc(100px + env(safe-area-inset-bottom)); }
      .mobile-nav { bottom:calc(8px + env(safe-area-inset-bottom)); }
    }
    @media (max-width: 720px) {
      .calendar-day { min-height:74px; padding:6px; border-radius:10px; }
      .calendar-event { font-size:.49rem; padding:2px 4px; }
      .calendar-summary { grid-template-columns:repeat(2,minmax(0,1fr)); }
      .calendar-detail { grid-template-columns:34px minmax(0,1fr); }
      .calendar-detail-actions { grid-column:1/-1; }
      .calendar-detail-actions .btn { flex:1; }
    }
    @media (max-width: 430px) {
      .calendar-grid,.calendar-weekdays { gap:3px; }
      .calendar-day { min-height:65px; padding:5px; }
      .calendar-day-number { font-size:.65rem; }
      .calendar-event { max-width:100%; }
      .mobile-nav .nav-btn { font-size:.49rem; }
    }

  

/* Shortcode integration with Astra and other themes */
body.melfit-shortcode-page {
  margin: 0 !important;
  background: #07111f !important;
}
body.melfit-shortcode-page #page,
body.melfit-shortcode-page .site,
body.melfit-shortcode-page .site-content,
body.melfit-shortcode-page .ast-container,
body.melfit-shortcode-page .content-area,
body.melfit-shortcode-page .site-main,
body.melfit-shortcode-page article,
body.melfit-shortcode-page .entry-content {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.melfit-shortcode-page .site-header,
body.melfit-shortcode-page .site-footer,
body.melfit-shortcode-page .entry-header,
body.melfit-shortcode-page .comments-area,
body.melfit-shortcode-page .sidebar-main,
body.melfit-shortcode-page #secondary {
  display: none !important;
}
.melfit-root { min-height: 100vh; background: #07111f; }

/* =========================================================
   MelFit 1.2 – Compact mobile app layout
   The app shell stays fixed; each secondary view scrolls inside
   its own content area. The overview itself fits one phone screen.
   ========================================================= */
.mobile-overview-actions,
.quick-sheet-close { display: none; }

@media (max-width: 900px) {
  html,
  body.melfit-direct-page,
  body.melfit-shortcode-page {
    height: 100%;
    overflow: hidden !important;
  }

  .melfit-root,
  .app-shell {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100dvh;
    overflow: hidden;
  }

  .main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    padding: max(8px, env(safe-area-inset-top)) 10px calc(72px + env(safe-area-inset-bottom));
  }

  .topbar {
    height: 42px;
    min-height: 42px;
    margin: 0 0 7px;
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .topbar h1 {
    font-size: 1.12rem;
    line-height: 1;
    letter-spacing: -.035em;
  }

  .topbar p { display: none; }
  .topbar-actions { width: auto; margin-left: auto; }
  .topbar-actions > .btn { display: none !important; }

  .date-control {
    width: 142px;
    min-width: 0;
    padding: 6px 8px;
    border-radius: 10px;
  }

  .date-control span { display: none; }
  .date-control input { font-size: .73rem; }

  .page.active {
    height: calc(100dvh - 121px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .page.active::-webkit-scrollbar { display: none; }
  #page-overview.active { overflow: hidden; }

  .mobile-nav {
    left: 7px;
    right: 7px;
    bottom: calc(6px + env(safe-area-inset-bottom));
    height: 58px;
    padding: 4px;
    border-radius: 15px;
  }

  .mobile-nav .nav-btn {
    min-width: 0;
    padding: 5px 1px;
    gap: 1px;
    border-radius: 10px;
    font-size: .47rem;
    line-height: 1.1;
  }

  .mobile-nav .nav-icon { font-size: .88rem; }

  /* Compact step entry */
  #page-overview .step-quick-card {
    margin: 0 0 7px;
    padding: 8px;
    border-radius: 14px;
  }

  #page-overview .step-quick-head { display: none; }
  #page-overview .step-quick-layout {
    grid-template-columns: minmax(0,1fr) 112px;
    gap: 7px;
  }

  #page-overview .step-number-wrap input {
    height: 44px;
    padding: 8px 68px 8px 10px;
    border-radius: 10px;
    font-size: 1.3rem;
  }

  #page-overview .step-number-wrap span { right: 10px; font-size: .62rem; }
  #page-overview .step-main-button {
    width: 112px;
    min-width: 112px;
    height: 44px;
    padding: 7px;
    border-radius: 10px;
    font-size: .66rem;
    line-height: 1.15;
  }

  #page-overview .step-adjust-row {
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 5px;
    margin-top: 6px;
  }

  #page-overview .step-adjust {
    padding: 6px 3px;
    border-radius: 8px;
    font-size: .59rem;
  }

  #page-overview .step-adjust-row .step-adjust:nth-child(1),
  #page-overview .step-adjust-row .step-adjust:nth-child(2) { display: none; }
  #page-overview .step-quick-foot { display: none; }

  /* Four essential values */
  #page-overview .kpi-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px;
    margin-bottom: 7px;
  }

  #page-overview .kpi {
    min-height: 68px;
    padding: 8px 9px;
    border-radius: 12px;
  }

  #page-overview .kpi:nth-child(5) { display: none; }
  #page-overview .kpi-label { font-size: .58rem; }
  #page-overview .kpi-icon { width: 21px; height: 21px; border-radius: 7px; font-size: .62rem; }
  #page-overview .kpi-value { margin-top: 7px; font-size: 1.18rem; }
  #page-overview .kpi-value small { font-size: .57rem; }
  #page-overview .kpi-sub { margin-top: 3px; font-size: .55rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Action strip replaces the long quick-entry section */
  .mobile-overview-actions {
    display: grid;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 6px;
    margin-bottom: 7px;
  }

  .mobile-action {
    min-width: 0;
    height: 48px;
    display: grid;
    place-items: center;
    gap: 1px;
    padding: 4px 2px;
    border: 1px solid var(--line);
    border-radius: 11px;
    color: var(--text);
    background: rgba(255,255,255,.035);
    cursor: pointer;
  }

  .mobile-action span { font-size: .95rem; line-height: 1; }
  .mobile-action strong { font-size: .56rem; }

  /* Reuse the existing quick-entry card as a bottom sheet */
  .overview-main-grid { display: block !important; }
  .overview-progress-panel { display: none !important; }
  .overview-quick-panel {
    display: none !important;
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: calc(69px + env(safe-area-inset-bottom));
    z-index: 90;
    max-height: min(72dvh, 560px);
    overflow-y: auto;
    padding: 18px 14px 14px !important;
    border-color: rgba(90,169,255,.45) !important;
    box-shadow: 0 20px 70px rgba(0,0,0,.62) !important;
    animation: melfitSheetIn .18s ease-out;
  }

  .melfit-root.quick-panel-open::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 80;
    background: rgba(0,0,0,.62);
    backdrop-filter: blur(3px);
  }

  .melfit-root.quick-panel-open .overview-quick-panel { display: block !important; }
  .quick-sheet-close {
    display: grid;
    position: absolute;
    top: 8px;
    right: 9px;
    z-index: 2;
    width: 30px;
    height: 30px;
    place-items: center;
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--text);
    background: rgba(255,255,255,.06);
    cursor: pointer;
    font-size: 1.1rem;
  }

  @keyframes melfitSheetIn {
    from { transform: translateY(24px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
  }

  /* Keep only the compact common-status card on Home */
  .overview-insights-grid {
    display: block !important;
    margin-top: 0 !important;
  }

  .overview-chart-panel { display: none !important; }
  .overview-challenge-panel { min-height: 0; }
  .overview-challenge-panel .leader-card {
    padding: 8px 10px;
    border-radius: 12px;
  }

  .overview-challenge-panel .panel-head { margin-bottom: 0; }
  .overview-challenge-panel .panel-head h2 { font-size: .72rem; }
  .overview-challenge-panel .panel-head p { display: none; }
  .overview-challenge-panel .leader-row {
    grid-template-columns: 22px minmax(0,1fr) 48px;
    gap: 6px;
    padding: 5px 0;
  }

  .overview-challenge-panel .rank { width: 21px; height: 21px; border-radius: 6px; font-size: .58rem; }
  .overview-challenge-panel .leader-name { margin-bottom: 2px; font-size: .61rem; }
  .overview-challenge-panel .leader-track { height: 4px; }
  .overview-challenge-panel .leader-points { font-size: .72rem; }
  .overview-challenge-panel .leader-points small { font-size: .48rem; }
  .overview-challenge-panel .mission {
    margin-top: 5px;
    padding: 7px 9px;
    border-radius: 10px;
  }
  .overview-challenge-panel .mission strong { font-size: .62rem; }
  .overview-challenge-panel .mission p {
    margin-top: 2px;
    font-size: .54rem;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Secondary pages: compact header and internal scrolling only */
  #page-food.active,
  #page-progress.active,
  #page-calendar.active,
  #page-challenge.active,
  #page-settings.active {
    padding-bottom: 6px;
  }

  #page-food .panel,
  #page-progress .panel,
  #page-calendar .panel,
  #page-challenge .panel,
  #page-settings .panel { box-shadow: none; }

  #page-food .food-layout { gap: 8px; }
  #page-food .food-entry-panel,
  #page-food .food-diary-panel { padding: 12px; }
  #page-food .food-results { max-height: 220px; }
  #page-progress .chart-wrap,
  #page-progress canvas { min-height: 210px; height: 210px; }
  #page-calendar .calendar-day { min-height: 58px; }
}

@media (max-width: 390px), (max-height: 700px) and (max-width: 900px) {
  #page-overview .step-adjust-row { display: none; }
  #page-overview .step-quick-card { padding: 7px; }
  #page-overview .kpi { min-height: 63px; }
  .mobile-action { height: 43px; }
  .overview-challenge-panel .mission { display: none; }
}


/* =========================================================
   MelFit 1.3 – Ultra compact secondary screens
   Mobile subsections behave like native app screens. Only one
   compact content view is visible at a time.
   ========================================================= */
.compact-section-tabs { display: none; }

@media (max-width: 900px) {
  .compact-section-tabs {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 4px;
    height: 36px;
    margin: 0 0 7px;
    padding: 3px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
  }

  .compact-section-tab {
    min-width: 0;
    padding: 5px 4px;
    border: 0;
    border-radius: 9px;
    color: var(--muted);
    background: transparent;
    cursor: pointer;
    font-size: .57rem;
    font-weight: 900;
    line-height: 1.05;
    white-space: nowrap;
  }

  .compact-section-tab.active {
    color: #07111f;
    background: var(--yellow);
  }

  #page-food.active,
  #page-progress.active,
  #page-calendar.active,
  #page-challenge.active,
  #page-settings.active {
    overflow: hidden !important;
  }

  #page-food > .food-layout,
  #page-progress > .progress-compact-body,
  #page-calendar > .grid.main-sidebar,
  #page-challenge > .challenge-compact-body,
  #page-settings > .grid.two {
    height: calc(100% - 43px);
    min-height: 0;
    overflow: hidden;
  }

  /* FOOD */
  #page-food .food-layout {
    display: block !important;
  }

  #page-food .food-entry-panel,
  #page-food .food-diary-panel {
    height: 100%;
    min-height: 0;
    margin: 0 !important;
    overflow: hidden;
  }

  #page-food[data-compact-view="search"] .food-diary-panel,
  #page-food[data-compact-view="manual"] .food-diary-panel {
    display: none !important;
  }

  #page-food[data-compact-view="diary"] .food-entry-panel {
    display: none !important;
  }

  #page-food[data-compact-view="search"] .manual-box {
    display: none !important;
  }

  #page-food[data-compact-view="manual"] .food-entry-panel > .panel-head,
  #page-food[data-compact-view="manual"] .search-row,
  #page-food[data-compact-view="manual"] .food-search-note,
  #page-food[data-compact-view="manual"] .food-results {
    display: none !important;
  }

  #page-food[data-compact-view="manual"] .manual-box {
    display: block !important;
    height: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    overflow-y: auto;
  }

  #page-food .panel-head {
    margin-bottom: 7px;
  }

  #page-food .panel-head h2 { font-size: .86rem; }
  #page-food .panel-head p { display: none; }

  #page-food .search-row {
    grid-template-columns: minmax(0,1fr) 76px;
    gap: 6px;
  }

  #page-food .search-row > div:nth-child(3) {
    grid-column: 1 / -1;
  }

  #page-food label {
    margin-bottom: 4px;
    font-size: .58rem;
  }

  #page-food input,
  #page-food select {
    padding: 9px 10px;
    border-radius: 9px;
    font-size: .72rem;
  }

  #page-food .food-search-note {
    display: none;
  }

  #page-food .food-results {
    height: calc(100% - 143px);
    max-height: none;
    margin-top: 7px;
    overflow-y: auto;
  }

  #page-food .food-result {
    padding: 8px;
    border-radius: 10px;
  }

  #page-food .food-result strong { font-size: .72rem; }
  #page-food .food-result small { font-size: .57rem; }
  #page-food .macro-chips { margin-top: 4px; gap: 3px; }
  #page-food .chip { padding: 3px 5px; font-size: .51rem; }

  #page-food .manual-box .form-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
  }

  #page-food .manual-box .full { grid-column: 1 / -1; }
  #page-food .manual-box textarea { min-height: 58px; }

  #page-food .food-diary-panel {
    display: flex;
    flex-direction: column;
  }

  #page-food .food-budget-card {
    flex: 0 0 auto;
    margin-bottom: 6px;
    padding: 8px 9px;
    border-radius: 11px;
  }

  #page-food .food-budget-head { font-size: .61rem; }
  #page-food .food-progress-track { height: 6px; margin-top: 6px; }

  #page-food .food-day-summary {
    flex: 0 0 auto;
    grid-template-columns: repeat(4, minmax(0,1fr));
    gap: 5px;
    margin-bottom: 7px;
  }

  #page-food .food-total {
    min-height: 57px;
    padding: 7px 6px;
    border-radius: 9px;
  }

  #page-food .food-total:nth-child(5),
  #page-food .food-total:nth-child(6) {
    display: none;
  }

  #page-food .food-total span { font-size: .49rem; }
  #page-food .food-total strong { margin-top: 4px; font-size: .78rem; }
  #page-food .food-total small { display: none; }

  #page-food .macro-progress-grid { display: none; }

  #page-food #mealGroups {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
  }

  #page-food .meal-group {
    margin-bottom: 7px;
    border-radius: 10px;
  }

  #page-food .meal-head { padding: 7px 9px; }
  #page-food .meal-item { padding: 7px 9px; gap: 6px; }
  #page-food .meal-item strong { font-size: .67rem; }
  #page-food .meal-item small { font-size: .53rem; }
  #page-food .meal-kcal { font-size: .66rem; }

  /* PROGRESS */
  #page-progress .progress-compact-body {
    position: relative;
  }

  #page-progress .stat-grid,
  #page-progress .grid.main-sidebar,
  #page-progress .progress-compact-body > .panel {
    display: none;
  }

  #page-progress[data-compact-view="summary"] .stat-grid,
  #page-progress[data-compact-view="summary"] .grid.main-sidebar,
  #page-progress[data-compact-view="chart"] .grid.main-sidebar,
  #page-progress[data-compact-view="history"] .progress-compact-body > .panel {
    display: grid;
  }

  #page-progress[data-compact-view="summary"] .grid.main-sidebar > .panel:first-child,
  #page-progress[data-compact-view="chart"] .grid.main-sidebar > .panel:nth-child(2) {
    display: none !important;
  }

  #page-progress[data-compact-view="summary"] .stat-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 6px;
    height: 126px;
    margin-bottom: 7px;
  }

  #page-progress .stat-card {
    min-height: 0;
    padding: 8px;
    border-radius: 10px;
  }

  #page-progress .stat-card span { font-size: .54rem; }
  #page-progress .stat-card strong { margin-top: 5px; font-size: .92rem; }

  #page-progress[data-compact-view="summary"] .grid.main-sidebar {
    display: block !important;
    height: calc(100% - 133px);
    margin: 0 !important;
  }

  #page-progress[data-compact-view="summary"] .grid.main-sidebar > .panel:nth-child(2) {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    padding: 10px;
    overflow: hidden;
  }

  #page-progress .milestone-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    gap: 5px;
  }

  #page-progress .milestone {
    padding: 7px;
    grid-template-columns: 30px minmax(0,1fr) auto;
    gap: 7px;
    border-radius: 9px;
  }

  #page-progress .milestone-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
  }

  #page-progress .milestone strong { font-size: .65rem; }
  #page-progress .milestone small { font-size: .52rem; }
  #page-progress .milestone-state { font-size: .49rem; }

  #page-progress[data-compact-view="chart"] .grid.main-sidebar {
    display: block !important;
    height: 100%;
    margin: 0 !important;
  }

  #page-progress[data-compact-view="chart"] .grid.main-sidebar > .panel:first-child {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    padding: 10px;
  }

  #page-progress[data-compact-view="chart"] .chart-wrap {
    flex: 1;
    min-height: 0;
    height: auto;
  }

  #page-progress[data-compact-view="chart"] canvas {
    height: 100%;
    min-height: 0;
  }

  #page-progress[data-compact-view="history"] .progress-compact-body > .panel {
    height: 100%;
    margin: 0 !important;
    padding: 10px;
    overflow: hidden;
  }

  #page-progress[data-compact-view="history"] .history-scroll {
    height: calc(100% - 36px);
    overflow: auto;
  }

  #page-progress .panel-head {
    margin-bottom: 6px;
  }

  #page-progress .panel-head h2 { font-size: .82rem; }
  #page-progress .panel-head p { display: none; }

  /* CALENDAR */
  #page-calendar > .grid.main-sidebar {
    display: block !important;
  }

  #page-calendar > .grid.main-sidebar > .panel,
  #page-calendar > .grid.main-sidebar > div > .panel {
    display: none;
  }

  #page-calendar[data-compact-view="month"] > .grid.main-sidebar > .panel,
  #page-calendar[data-compact-view="plan"] > .grid.main-sidebar > div > .panel:first-child,
  #page-calendar[data-compact-view="day"] > .grid.main-sidebar > div > .panel:nth-child(2) {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0 !important;
    padding: 10px;
    overflow: hidden;
  }

  #page-calendar .calendar-toolbar {
    flex: 0 0 auto;
    margin-bottom: 5px;
  }

  #page-calendar .calendar-toolbar h2 { font-size: .86rem; min-width: 0; }
  #page-calendar .calendar-legend,
  #page-calendar .calendar-summary {
    display: none;
  }

  #page-calendar .calendar-weekdays {
    flex: 0 0 auto;
  }

  #page-calendar .calendar-grid {
    flex: 1;
    min-height: 0;
    grid-auto-rows: minmax(0,1fr);
  }

  #page-calendar .calendar-day {
    min-height: 0;
    height: auto;
    padding: 4px;
    border-radius: 8px;
  }

  #page-calendar .calendar-day-number { font-size: .59rem; }
  #page-calendar .calendar-events { gap: 2px; margin-top: 3px; }
  #page-calendar .calendar-event { padding: 2px 3px; font-size: .43rem; }
  #page-calendar .calendar-more { font-size: .42rem; }

  #page-calendar[data-compact-view="plan"] .form-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
    gap: 7px;
    overflow-y: auto;
  }

  #page-calendar[data-compact-view="plan"] .full { grid-column: 1 / -1; }
  #page-calendar[data-compact-view="plan"] textarea { min-height: 56px; }

  #page-calendar[data-compact-view="day"] #calendarDayDetails {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
  }

  #page-calendar .panel-head {
    margin-bottom: 7px;
  }

  #page-calendar .panel-head h2 { font-size: .82rem; }
  #page-calendar .panel-head p { display: none; }

  /* CHALLENGE / SHARED GOAL */
  #page-challenge .challenge-compact-body {
    position: relative;
  }

  #page-challenge .challenge-hero,
  #page-challenge .challenge-compact-body > .grid.two,
  #page-challenge .challenge-compact-body > .panel {
    display: none;
  }

  #page-challenge[data-compact-view="score"] .challenge-hero,
  #page-challenge[data-compact-view="mission"] .challenge-compact-body > .grid.two,
  #page-challenge[data-compact-view="edit"] .challenge-compact-body > .panel {
    display: block;
  }

  #page-challenge[data-compact-view="score"] .challenge-hero {
    height: 100%;
    padding: 14px;
    overflow-y: auto;
  }

  #page-challenge .challenge-hero .eyebrow {
    margin-bottom: 5px;
    font-size: .56rem;
  }

  #page-challenge .challenge-hero h2 { font-size: 1.4rem; }
  #page-challenge .shared-goal-text {
    display: -webkit-box;
    margin-top: 7px;
    overflow: hidden;
    font-size: .68rem;
    line-height: 1.35;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  #page-challenge .challenge-meta {
    gap: 4px;
    margin-top: 9px;
  }

  #page-challenge .challenge-pill {
    padding: 5px 7px;
    font-size: .53rem;
  }

  #page-challenge .challenge-scoreboard {
    grid-template-columns: 1fr 28px 1fr;
    gap: 6px;
    margin-top: 10px;
  }

  #page-challenge .score-person {
    padding: 10px;
    border-radius: 12px;
  }

  #page-challenge .score-person .big-avatar {
    width: 35px;
    height: 35px;
    margin-bottom: 5px;
    border-radius: 10px;
    font-size: .82rem;
  }

  #page-challenge .score-number {
    margin-top: 5px;
    font-size: 1.45rem;
  }

  #page-challenge[data-compact-view="mission"] .challenge-compact-body > .grid.two {
    height: 100%;
    margin: 0 !important;
    grid-template-columns: 1fr;
    gap: 7px;
    overflow-y: auto;
  }

  #page-challenge[data-compact-view="mission"] .challenge-compact-body > .grid.two > .panel {
    padding: 10px;
  }

  #page-challenge .mission { padding: 9px; }
  #page-challenge .mission p { font-size: .61rem; }

  #page-challenge[data-compact-view="edit"] .challenge-compact-body > .panel {
    height: 100%;
    margin: 0 !important;
    padding: 10px;
    overflow-y: auto;
  }

  #page-challenge[data-compact-view="edit"] .form-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
  }

  #page-challenge[data-compact-view="edit"] .full { grid-column: 1 / -1; }
  #page-challenge[data-compact-view="edit"] textarea { min-height: 62px; }

  /* SETTINGS */
  #page-settings > .grid.two {
    display: block !important;
  }

  #page-settings > .grid.two > .panel,
  #page-settings > .grid.two > div > .panel {
    display: none;
  }

  #page-settings[data-compact-view="profile"] > .grid.two > .panel,
  #page-settings[data-compact-view="password"] > .grid.two > div > .panel:nth-child(1),
  #page-settings[data-compact-view="app"] > .grid.two > div > .panel:nth-child(3),
  #page-settings[data-compact-view="app"] > .grid.two > div > .panel:nth-child(4),
  #page-settings[data-compact-view="data"] > .grid.two > div > .panel:nth-child(2),
  #page-settings[data-compact-view="data"] > .grid.two > div > .panel:nth-child(5) {
    display: block;
  }

  #page-settings[data-compact-view="profile"] > .grid.two > .panel,
  #page-settings[data-compact-view="password"] > .grid.two > div > .panel:nth-child(1),
  #page-settings[data-compact-view="data"] > .grid.two > div,
  #page-settings[data-compact-view="app"] > .grid.two > div {
    height: 100%;
    min-height: 0;
  }

  #page-settings[data-compact-view="profile"] > .grid.two > .panel,
  #page-settings[data-compact-view="password"] > .grid.two > div > .panel:nth-child(1) {
    margin: 0 !important;
    padding: 10px;
    overflow-y: auto;
  }

  #page-settings[data-compact-view="app"] > .grid.two > div,
  #page-settings[data-compact-view="data"] > .grid.two > div {
    display: grid;
    align-content: start;
    gap: 7px;
    overflow-y: auto;
  }

  #page-settings[data-compact-view="app"] > .grid.two > div > .panel,
  #page-settings[data-compact-view="data"] > .grid.two > div > .panel {
    margin: 0 !important;
    padding: 10px;
  }

  #page-settings .panel-head {
    margin-bottom: 7px;
  }

  #page-settings .panel-head h2 { font-size: .82rem; }
  #page-settings .panel-head p { display: none; }

  #page-settings .form-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 7px;
  }

  #page-settings label { margin-bottom: 3px; font-size: .56rem; }
  #page-settings input,
  #page-settings select {
    padding: 8px 9px;
    border-radius: 9px;
    font-size: .69rem;
  }

  #page-settings .settings-note {
    padding: 8px;
    font-size: .58rem;
  }

  #page-settings .app-install-card {
    padding: 9px;
  }

  #page-settings .app-install-card h3 { font-size: .78rem; }
  #page-settings .app-install-card p { font-size: .58rem; }
}

@media (max-width: 390px), (max-height: 700px) and (max-width: 900px) {
  .compact-section-tabs {
    height: 32px;
    margin-bottom: 5px;
  }

  .compact-section-tab { padding: 4px 2px; font-size: .51rem; }

  #page-food > .food-layout,
  #page-progress > .progress-compact-body,
  #page-calendar > .grid.main-sidebar,
  #page-challenge > .challenge-compact-body,
  #page-settings > .grid.two {
    height: calc(100% - 37px);
  }

  #page-food .food-day-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
  #page-food .food-total { min-height: 49px; }
  #page-progress[data-compact-view="summary"] .stat-grid { height: 112px; }
  #page-progress[data-compact-view="summary"] .grid.main-sidebar { height: calc(100% - 119px); }
  #page-challenge .shared-goal-text { -webkit-line-clamp: 2; }
}


/* MelFit 1.4 – Expanded food library */
.food-category-bar {
  display: flex;
  gap: 6px;
  margin-top: 9px;
  padding-bottom: 3px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.food-category-chip {
  flex: 0 0 auto;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.03);
  cursor: pointer;
  font-size: .65rem;
  font-weight: 850;
  white-space: nowrap;
}

.food-category-chip.active {
  color: #07111f;
  border-color: var(--yellow);
  background: var(--yellow);
}

.food-result-count {
  margin: 5px 2px 0;
  color: var(--muted);
  font-size: .6rem;
}

.food-result-title-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.food-category-label {
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--muted);
  background: rgba(255,255,255,.055);
  font-size: .52rem;
  font-weight: 850;
}

.food-result-actions {
  display: flex;
  align-items: center;
  gap: 5px;
}

.food-own-delete {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,133,133,.25);
  border-radius: 8px;
  color: #ffc0c0;
  background: rgba(255,133,133,.05);
  cursor: pointer;
  font-weight: 900;
}

.custom-food-save {
  display: flex !important;
  align-items: center;
  gap: 8px;
  padding: 9px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text);
  background: rgba(255,255,255,.025);
  cursor: pointer;
}

.custom-food-save input {
  width: 18px !important;
  height: 18px;
  margin: 0;
  padding: 0 !important;
}

.custom-food-save span {
  font-size: .7rem;
  font-weight: 800;
}

@media (max-width: 900px) {
  #page-food .food-category-bar {
    margin-top: 6px;
    gap: 4px;
  }

  #page-food .food-category-chip {
    padding: 5px 7px;
    font-size: .53rem;
  }

  #page-food .food-result-count {
    margin-top: 3px;
    font-size: .49rem;
  }

  #page-food[data-compact-view="search"] .food-results {
    height: calc(100% - 194px);
  }

  #page-food[data-compact-view="manual"] .food-category-bar,
  #page-food[data-compact-view="manual"] .food-result-count {
    display: none !important;
  }

  #page-food .food-category-label {
    padding: 2px 4px;
    font-size: .44rem;
  }

  #page-food .food-result-actions {
    flex-direction: column;
  }

  #page-food .food-own-delete {
    width: 26px;
    height: 26px;
  }

  #page-food .custom-food-save {
    padding: 7px 8px;
  }

  #page-food .custom-food-save span {
    font-size: .58rem;
  }
}


/* =========================================================
   MelFit 1.5 – fast entry, reliable sync and strength tracker
   ========================================================= */
.sync-status { display:inline-flex; align-items:center; gap:6px; padding:7px 9px; border:1px solid var(--line); border-radius:999px; color:var(--muted); background:rgba(255,255,255,.035); font-size:.62rem; font-weight:850; white-space:nowrap; }
.sync-dot { width:7px; height:7px; border-radius:50%; background:var(--green); }
.sync-status[data-state="saving"] .sync-dot { background:var(--yellow); animation:melfitPulse 1s infinite; }
.sync-status[data-state="offline"] .sync-dot,.sync-status[data-state="error"] .sync-dot { background:var(--orange); }
@keyframes melfitPulse { 50% { opacity:.35; } }
.food-quick-bar { display:flex; align-items:center; gap:6px; margin-top:8px; overflow-x:auto; padding-bottom:2px; }
.food-quick-bar>strong { flex:0 0 auto; font-size:.62rem; }
.food-quick-chip { flex:0 0 auto; display:flex; flex-direction:column; gap:2px; max-width:145px; padding:7px 9px; border:1px solid rgba(90,169,255,.24); border-radius:11px; color:var(--text); background:rgba(90,169,255,.055); cursor:pointer; text-align:left; }
.food-quick-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.64rem; font-weight:900; }
.food-quick-chip small,.food-quick-empty { color:var(--muted); font-size:.53rem; }
.food-fast-actions { display:flex; gap:6px; margin-top:6px; }

.strength-layout { display:grid; grid-template-columns:1.05fr .95fr; gap:15px; }
.strength-history-panel { grid-column:1/-1; }
.strength-start-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.strength-start-actions,.strength-session-actions { display:flex; gap:8px; margin-top:9px; }
.strength-last-workout { margin-top:9px; padding:8px 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:rgba(255,255,255,.025); font-size:.64rem; line-height:1.45; }
.strength-presets { display:flex; gap:6px; overflow-x:auto; margin-bottom:9px; }
.strength-preset { flex:0 0 auto; padding:7px 9px; border:1px solid rgba(242,201,76,.25); border-radius:999px; color:var(--text); background:rgba(242,201,76,.06); cursor:pointer; font-size:.62rem; font-weight:850; }
.strength-builder { display:grid; gap:7px; }
.strength-builder-row { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px; }
.strength-builder-row:nth-child(2) { grid-template-columns:minmax(110px,.7fr) minmax(0,1fr) auto; }
.exercise-builder-row { grid-template-columns:minmax(120px,.8fr) minmax(0,1.2fr) 65px 75px auto; }
.strength-plan-list,.strength-history-list,.strength-exercise-list { display:grid; gap:8px; margin-top:10px; }
.strength-plan-card,.strength-exercise-card,.strength-history-item { border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.025); }
.strength-plan-card { padding:10px; }
.strength-plan-head,.strength-day-head,.strength-exercise-head,.strength-session-head { display:flex; align-items:center; justify-content:space-between; gap:9px; }
.strength-plan-head button,.strength-day-head button,.strength-exercise-tags button { border:0; color:#ffc2c2; background:transparent; cursor:pointer; font-size:.58rem; }
.strength-day-card { margin-top:7px; padding:8px; border:1px solid rgba(255,255,255,.075); border-radius:10px; }
.strength-exercise-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:6px; }
.strength-exercise-tags>span { padding:5px 7px; border-radius:999px; color:var(--muted); background:rgba(255,255,255,.05); font-size:.55rem; }
.strength-empty,.strength-empty-small { padding:18px 10px; color:var(--muted); text-align:center; font-size:.7rem; }
.strength-active-session { margin-top:10px; }
.strength-session-head { padding:10px; border-radius:11px; background:rgba(90,169,255,.07); }
.strength-session-head strong,.strength-session-head small { display:block; }
.strength-session-head small,.strength-exercise-head small { color:var(--muted); font-size:.56rem; line-height:1.45; }
.sync-badge { padding:5px 7px; border-radius:999px; color:var(--green); background:rgba(114,213,160,.08); font-size:.53rem; font-weight:900; }
.strength-exercise-card { padding:10px; }
.strength-exercise-head>div { min-width:0; }
.strength-exercise-head strong { display:block; }
.strength-set-table { display:grid; gap:5px; margin-top:8px; }
.strength-set-row { display:grid; grid-template-columns:35px minmax(0,1fr) minmax(0,1fr) 55px 27px; gap:5px; align-items:center; }
.strength-set-row input { padding:8px 7px; text-align:center; }
.strength-set-labels { color:var(--muted); font-size:.52rem; text-align:center; }
.strength-done { display:grid; place-items:center; margin:0; }
.strength-done input { position:absolute; opacity:0; }
.strength-done span { width:31px; height:31px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:rgba(255,255,255,.025); }
.strength-done input:checked+span { color:#07111f; border-color:var(--green); background:var(--green); }
.strength-set-row>button { width:27px; height:27px; border:1px solid var(--line); border-radius:8px; color:#ffc2c2; background:transparent; cursor:pointer; }
.strength-add-set { width:100%; margin-top:7px; padding:7px; border:1px dashed var(--line); border-radius:9px; color:var(--muted); background:transparent; cursor:pointer; font-size:.6rem; font-weight:850; }
.strength-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.strength-stats>div { padding:9px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.025); }
.strength-stats span { display:block; color:var(--muted); font-size:.54rem; }
.strength-stats strong { display:block; margin-top:4px; font-size:.9rem; }
.strength-history-item summary { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px; cursor:pointer; }
.strength-history-item summary span strong,.strength-history-item summary span small { display:block; }
.strength-history-item summary span small { color:var(--muted); font-size:.56rem; }
.strength-history-item summary b { font-size:.58rem; }
.strength-history-exercises { display:grid; gap:5px; padding:0 10px 10px; }
.strength-history-exercises>div { display:flex; justify-content:space-between; gap:8px; padding:7px; border-radius:8px; background:rgba(255,255,255,.03); font-size:.6rem; }
.strength-history-exercises span { color:var(--muted); text-align:right; }

.mobile-more-menu { display:none; }

@media (max-width:900px) {
  .topbar .sync-status { padding:6px 7px; }
  .mobile-nav { grid-template-columns:repeat(5,1fr) !important; }
  .mobile-more-menu { position:fixed; inset:0; z-index:90; display:block; pointer-events:none; opacity:0; transition:.18s ease; }
  .mobile-more-menu.open { pointer-events:auto; opacity:1; }
  .mobile-more-backdrop { position:absolute; inset:0; border:0; background:rgba(0,0,0,.55); }
  .mobile-more-sheet { position:absolute; left:10px; right:10px; bottom:10px; padding:10px 12px calc(14px + env(safe-area-inset-bottom)); border:1px solid var(--line); border-radius:20px; background:#0a1a2f; box-shadow:var(--shadow); transform:translateY(115%); transition:.2s ease; }
  .mobile-more-menu.open .mobile-more-sheet { transform:translateY(0); }
  .mobile-more-handle { width:42px; height:4px; margin:0 auto 10px; border-radius:99px; background:rgba(255,255,255,.18); }
  .mobile-more-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:10px; }
  .mobile-more-grid button { min-height:70px; display:grid; place-items:center; gap:4px; border:1px solid var(--line); border-radius:13px; color:var(--text); background:rgba(255,255,255,.035); font-weight:850; }
  .mobile-more-grid button span { font-size:1.1rem; }
  #page-strength.active { overflow:hidden !important; }
  #page-strength>.compact-section-tabs { display:grid; }
  #page-strength .strength-layout { height:calc(100% - 43px); display:block; overflow:hidden; }
  #page-strength .strength-layout>.panel { display:none; height:100%; margin:0; padding:10px; overflow:hidden; }
  #page-strength[data-compact-view="today"] .strength-today-panel,
  #page-strength[data-compact-view="plans"] .strength-plans-panel,
  #page-strength[data-compact-view="history"] .strength-history-panel { display:flex; flex-direction:column; }
  #page-strength .panel-head { margin-bottom:6px; }
  #page-strength .panel-head h2 { font-size:.82rem; }
  #page-strength .panel-head p { display:none; }
  .strength-start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  .strength-start-grid input,.strength-start-grid select { padding:8px; font-size:.68rem; }
  .strength-start-actions { flex:0 0 auto; margin-top:6px; }
  .strength-last-workout { flex:0 0 auto; margin-top:6px; padding:6px 8px; font-size:.54rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .strength-active-session { flex:1; min-height:0; overflow-y:auto; margin-top:6px; }
  .strength-session-head { position:sticky; top:0; z-index:2; padding:7px; }
  .strength-exercise-list { gap:6px; margin-top:6px; }
  .strength-exercise-card { padding:7px; border-radius:10px; }
  .strength-exercise-head strong { font-size:.68rem; }
  .strength-exercise-head small { font-size:.49rem; }
  .strength-set-row { grid-template-columns:27px minmax(0,1fr) minmax(0,1fr) 43px 25px; }
  .strength-set-row input { padding:7px 4px; font-size:.68rem; }
  .strength-done span { width:29px; height:29px; }
  .strength-session-actions { position:sticky; bottom:0; padding-top:6px; background:#10233d; }
  .strength-presets { flex:0 0 auto; margin-bottom:6px; }
  .strength-builder { flex:0 0 auto; gap:5px; }
  .strength-builder-row,.strength-builder-row:nth-child(2),.exercise-builder-row { grid-template-columns:1fr auto; }
  .strength-builder-row select,.strength-builder-row input { padding:7px 8px; font-size:.64rem; }
  .strength-builder-row:nth-child(2) select,.exercise-builder-row select { grid-column:1/-1; }
  .exercise-builder-row input:nth-of-type(2),.exercise-builder-row input:nth-of-type(3) { width:100%; }
  .strength-plan-list { flex:1; min-height:0; overflow-y:auto; margin-top:6px; }
  .strength-plan-card { padding:7px; }
  .strength-history-panel .strength-stats { flex:0 0 auto; }
  .strength-history-list { flex:1; min-height:0; overflow-y:auto; margin-top:6px; }
  #page-food .food-quick-bar { margin-top:5px; }
  #page-food .food-fast-actions { margin-top:4px; }
  #page-food[data-compact-view="search"] .food-results { height:calc(100% - 250px); }
}


/* MelFit 1.6 – personal exercise library */
.strength-library-panel { grid-column: 1 / -1; }
.custom-exercise-form {
  display: grid;
  grid-template-columns: minmax(180px,1.4fr) minmax(120px,.7fr) minmax(180px,1fr) auto;
  gap: 8px;
}
.custom-exercise-tools {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(150px,.35fr);
  gap: 8px;
  margin-top: 9px;
}
.custom-exercise-list {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 8px;
  margin-top: 9px;
}
.custom-exercise-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255,255,255,.025);
}
.custom-exercise-main { min-width: 0; }
.custom-exercise-title {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.custom-exercise-title strong { font-size: .74rem; }
.custom-exercise-title span,
.exercise-muscle-inline {
  display: inline-flex;
  padding: 3px 6px;
  border-radius: 999px;
  color: var(--yellow);
  background: rgba(242,201,76,.08);
  font-size: .5rem;
  font-weight: 900;
}
.custom-exercise-main small,
.custom-exercise-main em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: .55rem;
  font-style: normal;
  line-height: 1.35;
}
.custom-exercise-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
}
.custom-exercise-delete {
  padding: 7px 8px;
  border: 1px solid rgba(255,133,133,.22);
  border-radius: 9px;
  color: #ffc2c2;
  background: rgba(255,133,133,.04);
  cursor: pointer;
  font-size: .56rem;
  font-weight: 850;
}
.exercise-builder-row {
  grid-template-columns: minmax(120px,.7fr) minmax(170px,1fr) minmax(150px,1fr) 65px 75px auto;
}

@media (max-width:900px) {
  #page-strength[data-compact-view="library"] .strength-library-panel {
    display:flex;
    flex-direction:column;
  }
  .custom-exercise-form {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }
  .custom-exercise-form #customExerciseName,
  .custom-exercise-form #customExerciseNote,
  .custom-exercise-form #saveCustomExercise {
    grid-column: 1 / -1;
  }
  .custom-exercise-tools {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 6px;
  }
  .custom-exercise-list {
    flex: 1;
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 6px;
    margin-top: 6px;
    overflow-y: auto;
  }
  .custom-exercise-card { padding: 8px; }
  .custom-exercise-actions { flex-direction: column; }
  .custom-exercise-title strong { font-size: .68rem; }
  .custom-exercise-main small,
  .custom-exercise-main em { font-size: .49rem; }
  .exercise-builder-row { grid-template-columns: 1fr auto !important; }
  .exercise-builder-row #strengthDayForExercise,
  .exercise-builder-row #strengthExerciseLibrary { grid-column: 1 / -1; }
}


/* =========================================================
   MelFit 2.0 — Professional Fast UI
   ========================================================= */
:root {
  --pro-bg:#07111f;
  --pro-surface:#0d1b2d;
  --pro-surface-2:#11233a;
  --pro-border:rgba(255,255,255,.085);
  --pro-text:#f7f9fc;
  --pro-muted:#8fa0b7;
  --pro-yellow:#f2c94c;
  --pro-blue:#6ba8ff;
  --pro-green:#54d39b;
}
.melfit-root { background:var(--pro-bg); color:var(--pro-text); }
.panel,.kpi,.stat-card,.step-quick-card { border-color:var(--pro-border); box-shadow:none; }
.btn { min-height:42px; border-radius:12px; font-weight:850; letter-spacing:-.01em; }
.btn.primary { color:#09111d; background:var(--pro-yellow); border-color:var(--pro-yellow); }
input,select,textarea { min-height:44px; border-radius:12px; }
.pro-today-card { display:none; }

.smart-strength-card {
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  margin-bottom:12px; padding:14px; border:1px solid rgba(242,201,76,.22);
  border-radius:15px; background:linear-gradient(135deg,rgba(242,201,76,.09),rgba(107,168,255,.055));
}
.smart-strength-card div { min-width:0; }
.smart-strength-card span { display:block; color:var(--pro-yellow); font-size:.55rem; font-weight:950; letter-spacing:.11em; }
.smart-strength-card strong { display:block; margin-top:4px; font-size:.88rem; }
.smart-strength-card small { display:block; margin-top:3px; color:var(--pro-muted); font-size:.62rem; }
.pro-exercise-card { overflow:hidden; }
.pro-exercise-card > summary { list-style:none; cursor:pointer; }
.pro-exercise-card > summary::-webkit-details-marker { display:none; }
.pro-exercise-progress { flex:0 0 auto; padding:5px 8px; border-radius:999px; color:var(--pro-yellow); background:rgba(242,201,76,.08); font-size:.55rem; font-weight:900; }
.pro-exercise-body { padding:0 10px 10px; }
.pro-use-last { margin:0 0 7px auto; display:block; }
.pro-exercise-card:not([open]) .pro-exercise-progress { color:var(--pro-muted); background:rgba(255,255,255,.04); }

.fast-add-sheet { position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:0; transition:opacity .18s ease; }
.fast-add-sheet.open { pointer-events:auto; opacity:1; }
.fast-add-backdrop { position:absolute; inset:0; width:100%; border:0; background:rgba(2,8,16,.72); backdrop-filter:blur(5px); }
.fast-add-panel {
  position:absolute; left:max(10px,env(safe-area-inset-left)); right:max(10px,env(safe-area-inset-right)); bottom:10px;
  max-width:520px; margin:auto; padding:8px 14px calc(16px + env(safe-area-inset-bottom));
  border:1px solid var(--pro-border); border-radius:24px; background:#0b192b;
  box-shadow:0 24px 90px rgba(0,0,0,.65); transform:translateY(110%); transition:transform .22s cubic-bezier(.2,.8,.2,1);
}
.fast-add-sheet.open .fast-add-panel { transform:translateY(0); }
.fast-add-handle { width:42px; height:4px; margin:2px auto 10px; border-radius:99px; background:rgba(255,255,255,.17); }
.fast-add-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.fast-add-header div span { display:block; color:var(--pro-yellow); font-size:.52rem; font-weight:950; letter-spacing:.12em; }
.fast-add-header div strong { display:block; margin-top:3px; font-size:1rem; }
.fast-add-header > button { width:34px; height:34px; border:1px solid var(--pro-border); border-radius:11px; color:var(--pro-text); background:rgba(255,255,255,.04); font-size:1.15rem; }
.fast-pane { display:none; }
.fast-pane.active { display:block; }
.fast-action-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.fast-action-grid > button {
  min-height:94px; display:grid; align-content:center; justify-items:start; gap:3px; padding:12px;
  border:1px solid var(--pro-border); border-radius:16px; color:var(--pro-text); background:rgba(255,255,255,.035); text-align:left;
}
.fast-action-grid > button.wide { grid-column:1/-1; min-height:78px; }
.fast-action-grid > button > span { color:var(--pro-yellow); font-size:1.1rem; }
.fast-action-grid > button strong { font-size:.78rem; }
.fast-action-grid > button small { color:var(--pro-muted); font-size:.55rem; line-height:1.3; }
.fast-back { margin-bottom:8px; padding:5px 0; border:0; color:var(--pro-muted); background:transparent; font-size:.65rem; font-weight:800; }
.fast-big-input { position:relative; display:block; margin-bottom:10px; padding:13px; border:1px solid var(--pro-border); border-radius:16px; background:rgba(255,255,255,.03); }
.fast-big-input span { display:block; color:var(--pro-muted); font-size:.58rem; font-weight:800; }
.fast-big-input input { width:100%; min-height:58px; padding:3px 44px 0 0; border:0; color:var(--pro-text); background:transparent; font-size:2rem; font-weight:950; }
.fast-big-input b { position:absolute; right:15px; bottom:23px; color:var(--pro-muted); font-size:.7rem; }
.fast-preset-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:10px; }
.fast-preset-row button { min-height:40px; border:1px solid var(--pro-border); border-radius:10px; color:var(--pro-text); background:rgba(255,255,255,.035); font-size:.6rem; font-weight:850; }
.fast-current-value { padding:15px; margin-bottom:8px; border:1px solid var(--pro-border); border-radius:16px; background:rgba(255,255,255,.03); }
.fast-current-value span { display:block; color:var(--pro-muted); font-size:.58rem; }
.fast-current-value strong { display:block; margin-top:4px; font-size:1.65rem; }
.fast-water-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; }
.fast-water-grid button { min-height:76px; padding:10px; border:1px solid var(--pro-border); border-radius:14px; color:var(--pro-text); background:rgba(255,255,255,.035); }
.fast-water-grid strong,.fast-water-grid small { display:block; }
.fast-water-grid strong { font-size:.75rem; }
.fast-water-grid small { margin-top:4px; color:var(--pro-muted); font-size:.53rem; }
.fast-section-label { display:block; margin-bottom:7px; color:var(--pro-muted); font-size:.57rem; font-weight:850; }
.fast-recent-foods { display:grid; gap:6px; margin-bottom:10px; max-height:48dvh; overflow:auto; }
.fast-recent-foods > button { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 8px; padding:10px 11px; border:1px solid var(--pro-border); border-radius:13px; color:var(--pro-text); background:rgba(255,255,255,.03); text-align:left; }
.fast-recent-foods > button strong { font-size:.68rem; }
.fast-recent-foods > button small { color:var(--pro-muted); font-size:.52rem; }
.fast-recent-foods > button b { grid-row:1/3; grid-column:2; align-self:center; color:var(--pro-yellow); font-size:1.05rem; }
.fast-strength-summary { margin-bottom:10px; padding:14px; border:1px solid rgba(242,201,76,.2); border-radius:16px; background:rgba(242,201,76,.055); }
.fast-strength-summary span { display:block; color:var(--pro-yellow); font-size:.52rem; font-weight:950; letter-spacing:.1em; }
.fast-strength-summary strong { display:block; margin-top:5px; font-size:.9rem; }
.fast-strength-summary small { display:block; margin-top:4px; color:var(--pro-muted); font-size:.58rem; }
#fastChooseWorkout { margin-top:7px; }
body.melfit-sheet-open { overflow:hidden; }

@media (max-width:900px) {
  .app-shell { background:var(--pro-bg); }
  .main { padding-bottom:88px !important; }
  .topbar { height:54px; min-height:54px; padding:7px 11px !important; border-bottom:1px solid var(--pro-border); background:rgba(7,17,31,.92); backdrop-filter:blur(14px); }
  .topbar > div:first-child h1 { font-size:.86rem !important; }
  .topbar > div:first-child p { display:none; }
  .topbar-actions .date-control { min-height:34px; padding:4px 7px; border-radius:10px; }
  .topbar-actions .date-control span { display:none; }
  .topbar-actions .date-control input { min-height:28px; width:108px; padding:0; font-size:.58rem; }
  .sync-status { padding:5px 7px; border-radius:999px; font-size:.48rem; }

  .pro-today-card { display:block; min-height:calc(100dvh - 158px); padding:15px; border:1px solid var(--pro-border); border-radius:21px; background:linear-gradient(160deg,#10243c 0%,#0b192b 58%,#091522 100%); box-shadow:0 18px 55px rgba(0,0,0,.22); }
  .pro-today-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
  .pro-eyebrow { color:var(--pro-yellow); font-size:.5rem; font-weight:950; letter-spacing:.12em; }
  .pro-today-head h2 { margin:4px 0 0; font-size:1.26rem; line-height:1.1; letter-spacing:-.035em; }
  .pro-today-head p { margin:5px 0 0; color:var(--pro-muted); font-size:.59rem; }
  .pro-add-button { width:44px; height:44px; display:grid; place-items:center; border:1px solid rgba(242,201,76,.3); border-radius:14px; color:#09111d; background:var(--pro-yellow); box-shadow:0 8px 24px rgba(242,201,76,.16); }
  .pro-add-button span { font-size:1.45rem; line-height:1; }
  .pro-calorie-row { display:grid; grid-template-columns:minmax(0,1fr) 82px; align-items:center; gap:12px; margin-top:18px; padding:13px; border:1px solid var(--pro-border); border-radius:17px; background:rgba(255,255,255,.028); }
  .pro-calorie-main span { display:block; color:var(--pro-muted); font-size:.57rem; }
  .pro-calorie-main strong { display:block; margin-top:3px; font-size:1.85rem; letter-spacing:-.055em; }
  .pro-calorie-main small { color:var(--pro-muted); font-size:.62rem; font-weight:700; }
  .pro-progress-ring { --pro-pct:0; width:72px; height:72px; display:grid; place-items:center; border-radius:50%; background:conic-gradient(var(--pro-yellow) calc(var(--pro-pct)*1%),rgba(255,255,255,.07) 0); position:relative; }
  .pro-progress-ring::after { content:""; position:absolute; inset:7px; border-radius:50%; background:#0d1d31; }
  .pro-progress-ring span { position:relative; z-index:1; font-size:.72rem; font-weight:950; }
  .pro-metric-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-top:9px; }
  .pro-metric-grid button { min-height:76px; padding:10px; border:1px solid var(--pro-border); border-radius:14px; color:var(--pro-text); background:rgba(255,255,255,.025); text-align:left; }
  .pro-metric-grid span,.pro-metric-grid strong,.pro-metric-grid small { display:block; }
  .pro-metric-grid span { color:var(--pro-muted); font-size:.52rem; }
  .pro-metric-grid strong { margin-top:4px; font-size:1rem; }
  .pro-metric-grid small { margin-top:2px; color:var(--pro-muted); font-size:.48rem; }
  .pro-primary-actions { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-top:9px; }
  .pro-primary-actions button { min-height:48px; border:1px solid var(--pro-border); border-radius:13px; color:var(--pro-text); background:rgba(255,255,255,.035); font-size:.59rem; font-weight:900; }
  .pro-primary-actions button span { margin-right:4px; color:var(--pro-yellow); }

  #page-overview > .step-quick-card,
  #page-overview > .kpi-grid,
  #page-overview > .mobile-overview-actions,
  #page-overview > .overview-main-grid,
  #page-overview > .overview-insights-grid { display:none !important; }
  #page-overview.active { overflow:hidden !important; }

  .pro-mobile-nav { grid-template-columns:repeat(5,1fr) !important; height:68px; padding:6px 7px calc(6px + env(safe-area-inset-bottom)); border:1px solid var(--pro-border); border-radius:19px; background:rgba(10,25,43,.96); backdrop-filter:blur(16px); box-shadow:0 14px 42px rgba(0,0,0,.38); }
  .pro-mobile-nav .nav-btn { min-height:48px; border-radius:12px; color:var(--pro-muted); }
  .pro-mobile-nav .nav-btn.active { color:var(--pro-text); background:rgba(255,255,255,.045); }
  .pro-mobile-nav .nav-icon { color:var(--pro-yellow); font-size:.92rem; }
  .pro-nav-add { align-self:end; min-height:60px; margin-top:-19px; display:grid; justify-items:center; align-content:center; gap:1px; border:0; border-radius:18px; color:#07111f; background:var(--pro-yellow); box-shadow:0 12px 28px rgba(242,201,76,.22); }
  .pro-nav-add span { font-size:1.55rem; line-height:.8; }
  .pro-nav-add small { font-size:.46rem; font-weight:950; }

  .compact-section-tabs { border-radius:14px; background:rgba(255,255,255,.028); }
  .compact-section-tab { font-size:.55rem; }
  .compact-section-tab.active { box-shadow:none; }
  #page-food .food-entry-panel,#page-food .food-diary-panel,
  #page-strength .panel,#page-calendar .panel,#page-progress .panel { border-radius:16px; }

  .smart-strength-card { padding:10px; margin-bottom:7px; }
  .smart-strength-card strong { font-size:.75rem; }
  .smart-strength-card small { font-size:.52rem; }
  .smart-strength-card .btn { min-height:36px; padding:7px 9px; font-size:.56rem; }
  #page-strength[data-compact-view="today"] .strength-start-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
  #page-strength[data-compact-view="today"] .strength-start-grid > div:nth-child(3),
  #page-strength[data-compact-view="today"] .strength-start-grid > div:nth-child(4) { display:none; }
  #page-strength[data-compact-view="today"] .strength-start-actions { display:grid; grid-template-columns:1fr auto; gap:6px; }
  #page-strength[data-compact-view="today"] .strength-last-workout { display:none; }
  .pro-exercise-card { margin-bottom:6px; border-radius:13px; }
  .pro-exercise-card .strength-exercise-head { padding:9px; }
  .pro-exercise-card .strength-exercise-head small { display:-webkit-box; overflow:hidden; -webkit-line-clamp:1; -webkit-box-orient:vertical; }
  .strength-set-row { grid-template-columns:30px minmax(0,1fr) minmax(0,1fr) 40px 24px !important; }
  .strength-set-row input { min-height:40px !important; padding:5px 6px !important; font-size:.78rem !important; }
  .strength-done { width:38px !important; height:38px !important; }
}

@media (max-width:390px), (max-height:700px) and (max-width:900px) {
  .pro-today-card { min-height:calc(100dvh - 151px); padding:12px; }
  .pro-calorie-row { margin-top:12px; padding:10px; }
  .pro-calorie-main strong { font-size:1.55rem; }
  .pro-progress-ring { width:62px; height:62px; }
  .pro-metric-grid button { min-height:64px; padding:8px; }
  .pro-primary-actions button { min-height:43px; }
  .fast-action-grid > button { min-height:82px; }
}


/* =========================================================
   MelFit 2.1 — Premium visual refresh + motivation history
   Reintroduces the softer gradients and shadows of the earlier UI.
   ========================================================= */
.melfit-root {
  background:
    radial-gradient(circle at 9% -4%, rgba(90,169,255,.18), transparent 31%),
    radial-gradient(circle at 96% 3%, rgba(242,201,76,.13), transparent 28%),
    linear-gradient(150deg, #050c16 0%, #071321 45%, #0b223c 100%);
}

.panel,
.kpi,
.stat-card,
.step-quick-card {
  border-color: rgba(255,255,255,.11);
  background: linear-gradient(145deg, rgba(18,39,67,.92), rgba(8,24,43,.90));
  box-shadow: 0 18px 48px rgba(0,0,0,.22);
}

.btn,
input,
select,
textarea {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
}

.btn.primary {
  box-shadow: 0 9px 22px rgba(242,201,76,.16);
}

@media (max-width:900px) {
  .topbar {
    background: linear-gradient(180deg, rgba(8,23,40,.96), rgba(7,17,31,.91));
    box-shadow: 0 8px 26px rgba(0,0,0,.16);
  }

  .pro-today-card {
    position: relative;
    min-height: auto;
    overflow: hidden;
    border-color: rgba(255,255,255,.13);
    background:
      radial-gradient(circle at 90% 4%, rgba(242,201,76,.16), transparent 25%),
      radial-gradient(circle at 2% 50%, rgba(90,169,255,.16), transparent 34%),
      linear-gradient(150deg, rgba(18,44,75,.98) 0%, rgba(10,27,48,.98) 56%, rgba(7,20,36,.99) 100%);
    box-shadow:
      0 24px 64px rgba(0,0,0,.34),
      inset 0 1px 0 rgba(255,255,255,.045);
  }

  .pro-today-card::before {
    content:"";
    position:absolute;
    width:180px;
    height:180px;
    right:-100px;
    top:-110px;
    border:32px solid rgba(255,255,255,.025);
    border-radius:50%;
    pointer-events:none;
  }

  .pro-today-card > * {
    position: relative;
    z-index: 1;
  }

  .pro-add-button {
    border-color: rgba(255,255,255,.18);
    background: linear-gradient(145deg, #ffe27e, var(--yellow));
    box-shadow: 0 12px 30px rgba(242,201,76,.24);
  }

  .pro-calorie-row {
    border-color: rgba(255,255,255,.11);
    background:
      linear-gradient(145deg, rgba(255,255,255,.065), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  .pro-progress-ring {
    filter: drop-shadow(0 7px 18px rgba(242,201,76,.12));
  }

  .pro-metric-grid button {
    position: relative;
    overflow: hidden;
    border-color: rgba(255,255,255,.10);
    background: linear-gradient(145deg, rgba(255,255,255,.052), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  .pro-metric-grid button::after {
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    border-radius:3px;
    background: var(--blue);
    opacity:.9;
  }

  .pro-metric-grid button:nth-child(2)::after { background: var(--yellow); }
  .pro-metric-grid button:nth-child(3)::after { background: var(--cyan); }
  .pro-metric-grid button:nth-child(4)::after { background: var(--green); }

  .pro-primary-actions button {
    border-color: rgba(255,255,255,.11);
    background: linear-gradient(145deg, rgba(255,255,255,.06), rgba(255,255,255,.018));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
  }

  .pro-primary-actions button:active,
  .pro-metric-grid button:active,
  .pro-achievement-grid button:active {
    transform: scale(.98);
  }

  .pro-achievement-card {
    margin-top: 10px;
    padding: 11px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 17px;
    background:
      radial-gradient(circle at 100% 0%, rgba(90,169,255,.08), transparent 35%),
      linear-gradient(145deg, rgba(4,15,29,.48), rgba(255,255,255,.024));
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.035),
      0 12px 30px rgba(0,0,0,.12);
  }

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

  .pro-achievement-head div > span {
    display:block;
    color:var(--yellow);
    font-size:.47rem;
    font-weight:950;
    letter-spacing:.13em;
  }

  .pro-achievement-head div > strong {
    display:block;
    margin-top:3px;
    font-size:.73rem;
    letter-spacing:-.015em;
  }

  .pro-achievement-head > button {
    flex:0 0 auto;
    padding:5px 8px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:9px;
    color:var(--muted);
    background:rgba(255,255,255,.035);
    font-size:.51rem;
    font-weight:850;
  }

  .pro-weight-journey {
    display:grid;
    grid-template-columns:64px minmax(0,1fr) 64px;
    align-items:end;
    gap:8px;
    margin-top:9px;
  }

  .pro-journey-value strong,
  .pro-journey-value small {
    display:block;
  }

  .pro-journey-value strong {
    font-size:.77rem;
  }

  .pro-journey-value small {
    margin-top:2px;
    color:var(--muted);
    font-size:.43rem;
  }

  .pro-journey-value.right {
    text-align:right;
  }

  .pro-journey-labels {
    display:flex;
    justify-content:space-between;
    gap:8px;
    margin-bottom:4px;
    color:var(--muted);
    font-size:.42rem;
  }

  .pro-journey-track {
    height:7px;
    overflow:hidden;
    border-radius:99px;
    background:rgba(255,255,255,.07);
  }

  .pro-journey-track span {
    display:block;
    width:0;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--blue), var(--cyan), var(--yellow));
    box-shadow:0 0 15px rgba(90,169,255,.28);
    transition:width .35s ease;
  }

  .pro-achievement-grid {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:5px;
    margin-top:9px;
  }

  .pro-achievement-grid button {
    min-width:0;
    min-height:55px;
    padding:6px 3px;
    border:1px solid rgba(255,255,255,.085);
    border-radius:11px;
    color:var(--text);
    background:linear-gradient(145deg,rgba(255,255,255,.045),rgba(255,255,255,.012));
    text-align:center;
  }

  .pro-achievement-grid span,
  .pro-achievement-grid strong,
  .pro-achievement-grid small {
    display:block;
  }

  .pro-achievement-grid span {
    color:var(--yellow);
    font-size:.69rem;
    line-height:1;
  }

  .pro-achievement-grid strong {
    margin-top:3px;
    font-size:.79rem;
  }

  .pro-achievement-grid small {
    margin-top:1px;
    overflow:hidden;
    color:var(--muted);
    font-size:.39rem;
    line-height:1.1;
    white-space:nowrap;
  }

  .pro-week-progress {
    margin-top:9px;
    padding-top:8px;
    border-top:1px solid rgba(255,255,255,.075);
  }

  .pro-week-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:6px;
  }

  .pro-week-head span {
    color:var(--muted);
    font-size:.44rem;
    font-weight:900;
    letter-spacing:.1em;
  }

  .pro-week-head small {
    color:var(--green);
    font-size:.43rem;
    font-weight:800;
  }

  .pro-week-strip {
    display:grid;
    grid-template-columns:repeat(7,minmax(0,1fr));
    gap:4px;
  }

  .pro-week-strip button {
    position:relative;
    min-width:0;
    min-height:43px;
    padding:4px 2px;
    border:1px solid rgba(255,255,255,.075);
    border-radius:9px;
    color:var(--muted);
    background:rgba(255,255,255,.018);
  }

  .pro-week-strip button span,
  .pro-week-strip button strong,
  .pro-week-strip button i {
    display:block;
    font-style:normal;
  }

  .pro-week-strip button span {
    font-size:.38rem;
    text-transform:uppercase;
  }

  .pro-week-strip button strong {
    margin-top:1px;
    color:var(--text);
    font-size:.59rem;
  }

  .pro-week-strip button i {
    height:10px;
    margin-top:1px;
    color:var(--muted);
    font-size:.5rem;
    font-weight:950;
  }

  .pro-week-strip button.tracked {
    border-color:rgba(90,169,255,.22);
    background:rgba(90,169,255,.055);
  }

  .pro-week-strip button.success {
    border-color:rgba(114,213,160,.30);
    background:linear-gradient(145deg,rgba(114,213,160,.13),rgba(114,213,160,.035));
  }

  .pro-week-strip button.success i {
    color:var(--green);
  }

  .pro-mobile-nav {
    border-color:rgba(255,255,255,.12);
    background:
      linear-gradient(180deg,rgba(15,37,63,.97),rgba(7,20,36,.98));
    box-shadow:0 18px 48px rgba(0,0,0,.42);
  }

  .pro-nav-add {
    background:linear-gradient(145deg,#ffe27e,var(--yellow));
    box-shadow:0 14px 32px rgba(242,201,76,.27);
  }

  #page-overview.active {
    overflow-y:auto !important;
    scrollbar-width:none;
  }

  #page-overview.active::-webkit-scrollbar {
    display:none;
  }
}

@media (max-width:390px), (max-height:720px) and (max-width:900px) {
  .pro-today-card {
    padding:11px;
  }

  .pro-today-head p,
  .pro-primary-actions {
    display:none;
  }

  .pro-calorie-row {
    margin-top:9px;
  }

  .pro-metric-grid {
    margin-top:6px;
  }

  .pro-metric-grid button {
    min-height:58px;
  }

  .pro-achievement-card {
    margin-top:7px;
    padding:9px;
  }

  .pro-achievement-grid button {
    min-height:48px;
  }

  .pro-week-strip button {
    min-height:38px;
  }
}


/* =========================================================
   MelFit 3.0 – professional, personalized and fast
   ========================================================= */
.pro-personal-focus,
.pro-smart-suggestions,
.pro-weekly-report {
  border: 1px solid rgba(255,255,255,.11);
  background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(255,255,255,.018));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.035);
}

.pro-personal-focus {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:10px;
  padding:11px 12px;
  border-radius:16px;
}
.pro-focus-copy { min-width:0; }
.pro-focus-copy span { display:block; color:var(--yellow); font-size:.47rem; font-weight:950; letter-spacing:.12em; }
.pro-focus-copy strong { display:block; margin-top:3px; font-size:.78rem; }
.pro-focus-copy small { display:block; margin-top:3px; color:var(--muted); font-size:.52rem; line-height:1.3; }
.pro-focus-actions { flex:0 0 auto; display:flex; gap:6px; }
.pro-focus-actions button {
  padding:7px 9px; border:1px solid rgba(255,255,255,.1); border-radius:10px;
  color:var(--text); background:rgba(255,255,255,.04); font-size:.54rem; font-weight:900;
}
.pro-focus-actions button:first-child { color:#08111e; border-color:var(--yellow); background:var(--yellow); }

.pro-smart-suggestions { margin-top:8px; padding:9px; border-radius:15px; }
.pro-smart-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:6px; }
.pro-smart-head span { color:var(--blue); font-size:.45rem; font-weight:950; letter-spacing:.12em; }
.pro-smart-head small { color:var(--muted); font-size:.42rem; }
.pro-suggestion-list { display:grid; gap:5px; }
.pro-suggestion-list button {
  display:grid; grid-template-columns:30px minmax(0,1fr) auto; align-items:center; gap:8px;
  width:100%; padding:7px 8px; border:1px solid rgba(255,255,255,.075); border-radius:11px;
  color:var(--text); background:rgba(255,255,255,.025); text-align:left;
}
.pro-suggestion-list button > span { display:grid; place-items:center; width:28px; height:28px; border-radius:9px; color:var(--yellow); background:rgba(242,201,76,.08); font-size:.63rem; font-weight:950; }
.pro-suggestion-list strong { display:block; font-size:.61rem; }
.pro-suggestion-list small { display:block; margin-top:2px; color:var(--muted); font-size:.47rem; }
.pro-suggestion-list b { color:var(--muted); font-size:.9rem; }

.pro-weekly-report { margin-top:10px; padding:10px; border-radius:16px; }
.pro-weekly-report-head { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.pro-weekly-report-head span { display:block; color:var(--cyan); font-size:.45rem; font-weight:950; letter-spacing:.12em; }
.pro-weekly-report-head strong { display:block; margin-top:2px; font-size:.69rem; }
.pro-weekly-report-head button { padding:5px 7px; border:1px solid rgba(255,255,255,.08); border-radius:9px; color:var(--muted); background:rgba(255,255,255,.03); font-size:.48rem; font-weight:850; }
.pro-weekly-metrics { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; margin-top:8px; }
.pro-weekly-metrics div { min-width:0; padding:7px 5px; border:1px solid rgba(255,255,255,.065); border-radius:10px; background:rgba(255,255,255,.02); text-align:center; }
.pro-weekly-metrics span { display:block; overflow:hidden; color:var(--muted); font-size:.4rem; white-space:nowrap; }
.pro-weekly-metrics strong { display:block; margin-top:3px; font-size:.63rem; }
.pro-weekly-footer { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:7px; padding-top:7px; border-top:1px solid rgba(255,255,255,.07); }
.pro-weekly-footer strong { font-size:.6rem; }
.pro-weekly-footer small { color:var(--muted); font-size:.45rem; text-align:right; }

/* Complete meals and favorites */
.saved-meal-section { margin:8px 0; padding:9px; border:1px solid var(--line); border-radius:13px; background:rgba(255,255,255,.02); }
.saved-meal-head { display:flex; justify-content:space-between; align-items:end; gap:10px; margin-bottom:7px; }
.saved-meal-head span { display:block; color:var(--yellow); font-size:.48rem; font-weight:950; letter-spacing:.11em; }
.saved-meal-head strong { display:block; margin-top:2px; font-size:.72rem; }
.saved-meal-head small { color:var(--muted); font-size:.52rem; }
.saved-meal-templates { display:flex; gap:7px; overflow-x:auto; }
.saved-meal-card { position:relative; flex:0 0 min(245px,78vw); display:flex; border:1px solid rgba(255,255,255,.08); border-radius:11px; background:rgba(255,255,255,.025); }
.saved-meal-main { flex:1; min-width:0; padding:9px 30px 9px 9px; border:0; color:var(--text); background:transparent; text-align:left; }
.saved-meal-main span,.saved-meal-main strong,.saved-meal-main small { display:block; }
.saved-meal-main span { color:var(--blue); font-size:.45rem; font-weight:900; text-transform:uppercase; }
.saved-meal-main strong { margin-top:3px; font-size:.66rem; }
.saved-meal-main small { margin-top:3px; color:var(--muted); font-size:.49rem; }
.saved-meal-delete { position:absolute; right:5px; top:5px; width:23px; height:23px; border:0; border-radius:7px; color:#ffbcbc; background:rgba(255,133,133,.07); }
.save-meal-template { padding:4px 6px; border:1px solid rgba(242,201,76,.22); border-radius:7px; color:var(--yellow); background:rgba(242,201,76,.05); font-size:.45rem; font-weight:850; }
.food-favorite-button { width:30px; height:30px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:rgba(255,255,255,.025); }
.food-favorite-button.active { color:var(--yellow); border-color:rgba(242,201,76,.35); background:rgba(242,201,76,.08); }
.fast-meal-templates,.fast-favorite-foods,.fast-activity-presets { display:grid; gap:6px; margin-bottom:8px; }
.fast-meal-templates button,.fast-favorite-foods button,.fast-activity-presets button {
  display:grid; grid-template-columns:minmax(0,1fr) auto; padding:9px; border:1px solid var(--line); border-radius:11px;
  color:var(--text); background:rgba(255,255,255,.025); text-align:left;
}
.fast-meal-templates button strong,.fast-favorite-foods button strong,.fast-activity-presets button strong { font-size:.63rem; }
.fast-meal-templates button small,.fast-favorite-foods button small,.fast-activity-presets button small { grid-column:1; margin-top:2px; color:var(--muted); font-size:.48rem; }
.fast-meal-templates button b,.fast-favorite-foods button b,.fast-activity-presets button b { grid-column:2; grid-row:1/3; align-self:center; color:var(--yellow); }

/* Strength focus mode */
.strength-analysis-panel { grid-column:1/-1; }
.strength-focus-card { margin-top:8px; padding:12px; border:1px solid rgba(242,201,76,.18); border-radius:17px; background:radial-gradient(circle at 100% 0%,rgba(242,201,76,.10),transparent 36%),linear-gradient(145deg,rgba(16,39,67,.96),rgba(7,22,39,.98)); }
.strength-focus-top { display:grid; grid-template-columns:34px minmax(0,1fr) 34px; align-items:center; gap:8px; }
.strength-focus-top > button { width:34px; height:34px; border:1px solid var(--line); border-radius:10px; color:var(--text); background:rgba(255,255,255,.035); font-size:1rem; }
.strength-focus-top span { display:block; color:var(--yellow); font-size:.46rem; font-weight:950; letter-spacing:.1em; }
.strength-focus-top strong { display:block; margin-top:3px; font-size:1rem; }
.strength-focus-top small { display:block; margin-top:3px; color:var(--muted); font-size:.52rem; }
.strength-last-performance { display:flex; justify-content:space-between; align-items:center; margin-top:9px; padding:7px 9px; border-radius:10px; background:rgba(255,255,255,.035); }
.strength-last-performance span { color:var(--muted); font-size:.52rem; }
.strength-last-performance strong { font-size:.7rem; }
.strength-focus-inputs { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:9px; }
.strength-focus-inputs label > span { display:block; margin-bottom:4px; color:var(--muted); font-size:.51rem; font-weight:800; }
.strength-focus-inputs label > div { display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; background:rgba(4,14,27,.56); overflow:hidden; }
.strength-focus-inputs input { flex:1; min-width:0; padding:12px; border:0; background:transparent; font-size:1.05rem; font-weight:900; text-align:center; }
.strength-focus-inputs b { padding-right:9px; color:var(--muted); font-size:.5rem; }
.strength-complete-set { width:100%; margin-top:9px; padding:12px; border:0; border-radius:12px; color:#07111f; background:linear-gradient(145deg,#ffe27e,var(--yellow)); box-shadow:0 10px 25px rgba(242,201,76,.18); font-size:.71rem; font-weight:950; }
.strength-rest-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:6px; margin-top:8px; }
.strength-rest-row span { display:block; color:var(--muted); font-size:.43rem; font-weight:900; }
.strength-rest-row strong { display:block; margin-top:2px; font-size:.78rem; }
.strength-rest-row strong.running { color:var(--cyan); }
.strength-rest-row button { padding:6px 7px; border:1px solid var(--line); border-radius:9px; color:var(--muted); background:rgba(255,255,255,.025); font-size:.48rem; font-weight:850; }
.strength-all-exercises { margin-top:8px; }
.strength-all-exercises > summary { padding:8px 10px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:rgba(255,255,255,.02); font-size:.55rem; font-weight:850; cursor:pointer; }
.strength-pr-list { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.strength-pr-card { padding:9px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.025); }
.strength-pr-card span { color:var(--yellow); font-size:.45rem; font-weight:950; }
.strength-pr-card strong { display:block; margin-top:3px; font-size:.64rem; }
.strength-pr-card small { display:block; margin-top:3px; color:var(--muted); font-size:.48rem; }
.strength-progress-picker { display:flex; align-items:center; gap:8px; margin-top:10px; }
.strength-progress-picker label { color:var(--muted); font-size:.55rem; }
.strength-progress-picker select { flex:1; }
.strength-progress-list { display:grid; gap:5px; margin-top:7px; }
.strength-progress-row { display:grid; grid-template-columns:55px 75px minmax(0,1fr) auto; align-items:center; gap:7px; padding:7px 8px; border:1px solid rgba(255,255,255,.07); border-radius:9px; background:rgba(255,255,255,.018); }
.strength-progress-row span,.strength-progress-row small,.strength-progress-row b { font-size:.49rem; }
.strength-progress-row small { color:var(--muted); }
.strength-progress-row b { color:var(--muted); }

/* Activity / running */
.activity-layout { display:grid; grid-template-columns:1.2fr .8fr; gap:14px; }
.activity-history-panel { grid-column:1/-1; }
.activity-quick-presets { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; margin-bottom:9px; }
.activity-quick-presets button { display:grid; grid-template-columns:32px minmax(0,1fr); gap:7px; padding:9px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:rgba(255,255,255,.025); text-align:left; }
.activity-quick-presets button span { grid-row:1/3; display:grid; place-items:center; width:30px; height:30px; border-radius:9px; background:rgba(90,169,255,.08); }
.activity-quick-presets strong { font-size:.63rem; }
.activity-quick-presets small { color:var(--muted); font-size:.49rem; }
.activity-entry-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.activity-entry-form .full { grid-column:1/-1; }
.activity-unit-input { display:flex; align-items:center; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.activity-unit-input input { flex:1; min-width:0; border:0; }
.activity-unit-input span { padding-right:8px; color:var(--muted); font-size:.52rem; }
.activity-routine-form { display:grid; gap:7px; }
.activity-preset-list,.activity-history { display:grid; gap:6px; margin-top:8px; }
.activity-preset-card,.activity-history-card { display:flex; align-items:center; gap:8px; padding:8px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.activity-preset-card > button:first-child { flex:1; display:flex; align-items:center; gap:8px; border:0; color:var(--text); background:transparent; text-align:left; }
.activity-preset-card > button:last-child,.activity-history-card > button { width:25px; height:25px; border:0; border-radius:7px; color:#ffbcbc; background:rgba(255,133,133,.06); }
.activity-preset-card strong,.activity-history-card strong { display:block; font-size:.63rem; }
.activity-preset-card small,.activity-history-card small { display:block; margin-top:2px; color:var(--muted); font-size:.49rem; }
.activity-history-icon { width:32px; height:32px; display:grid; place-items:center; border-radius:10px; background:rgba(90,169,255,.08); }
.activity-history-card > div:nth-child(2) { flex:1; min-width:0; }
.activity-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.activity-stats div { padding:8px; border:1px solid var(--line); border-radius:10px; background:rgba(255,255,255,.02); }
.activity-stats span { color:var(--muted); font-size:.49rem; }
.activity-stats strong { display:block; margin-top:3px; font-size:.67rem; }
.fast-activity-type-grid { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:8px 0; }
.fast-activity-type-grid button { padding:10px; border:1px solid var(--line); border-radius:11px; color:var(--text); background:rgba(255,255,255,.03); font-size:.61rem; font-weight:850; }

@media (max-width:900px) {
  .pro-personal-focus { padding:9px; }
  .pro-focus-actions { flex-direction:column; }
  .pro-focus-actions button { padding:6px 8px; }
  .pro-smart-suggestions { padding:8px; }
  .pro-weekly-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pro-weekly-report { padding:9px; }
  .saved-meal-head > small { display:none; }
  .meal-head-totals .save-meal-template { display:inline-flex; }
  .strength-pr-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .strength-progress-row { grid-template-columns:44px 60px minmax(0,1fr); }
  .strength-progress-row b { grid-column:2/-1; }
  .activity-layout { display:block; height:100%; overflow:hidden; }
  #page-activity.active { overflow:hidden !important; }
  #page-activity > .compact-section-tabs { display:grid; }
  #page-activity .activity-layout > .panel { display:none; height:100%; margin:0; overflow-y:auto; }
  #page-activity[data-compact-view="log"] .activity-log-panel,
  #page-activity[data-compact-view="routines"] .activity-routine-panel,
  #page-activity[data-compact-view="history"] .activity-history-panel { display:flex; flex-direction:column; }
  #page-activity .activity-layout { height:calc(100% - 43px); }
  .activity-quick-presets { grid-template-columns:1fr 1fr; }
  .activity-entry-form { grid-template-columns:1fr 1fr; }
  .activity-history { overflow-y:auto; }
  #page-strength[data-compact-view="analysis"] .strength-analysis-panel { display:flex; flex-direction:column; }
  #page-strength[data-compact-view="analysis"] .strength-progress-list { flex:1; min-height:0; overflow-y:auto; }
  #page-strength .strength-analysis-panel { height:100%; overflow:hidden; }
  .strength-focus-card { padding:10px; }
  .strength-all-exercises .strength-exercise-list { max-height:42vh; overflow-y:auto; }
  .food-result-actions { flex-direction:row !important; }
}

@media (max-width:390px), (max-height:720px) and (max-width:900px) {
  .pro-smart-suggestions { display:none; }
  .pro-weekly-report { margin-top:7px; }
  .pro-weekly-footer { display:none; }
  .pro-personal-focus { margin-top:7px; }
  .strength-focus-top strong { font-size:.85rem; }
  .strength-focus-inputs input { padding:9px; }
}

@media (max-width:900px) {
  .pro-suggestion-list {
    grid-auto-flow: column;
    grid-auto-columns: minmax(190px, 78%);
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }
  .pro-suggestion-list button { scroll-snap-align: start; }
}

.food-amount-unit{display:grid;grid-template-columns:minmax(0,1fr)92px;gap:6px}
.food-amount-unit select{min-width:0}
@media(max-width:900px){.food-amount-unit{grid-template-columns:minmax(0,1fr)84px}}


/* =========================================================
   MelFit 4.1 — Performance Cockpit
   Final design layer: centralized tokens and calm hierarchy.
   ========================================================= */
:root,
html[data-melfit-theme="blue-performance"],
body[data-melfit-theme="blue-performance"] {
  color-scheme: dark;
  --mf-bg: #050b14;
  --mf-bg-raised: #081422;
  --mf-surface: #0d1b2c;
  --mf-surface-strong: #11243a;
  --mf-surface-soft: #142c46;
  --mf-line: rgba(126, 184, 245, .16);
  --mf-line-strong: rgba(126, 184, 245, .30);
  --mf-text: #f5f8fc;
  --mf-muted: #a8bad0;
  --mf-primary: #72aefc;
  --mf-secondary: #62d8df;
  --mf-energy: #f3bd66;
  --mf-success: #69d7a6;
  --mf-danger: #ef8988;
  --mf-glow: rgba(71, 145, 239, .22);
  --mf-energy-glow: rgba(243, 189, 102, .16);
  --mf-shadow: 0 24px 70px rgba(0, 4, 11, .42);
  --mf-radius-lg: 24px;
  --mf-radius: 16px;
  --mf-radius-sm: 11px;

  /* Legacy compatibility */
  --bg: var(--mf-bg);
  --bg-soft: var(--mf-bg-raised);
  --panel: var(--mf-surface);
  --panel-soft: var(--mf-bg-raised);
  --line: var(--mf-line);
  --line-strong: var(--mf-line-strong);
  --text: var(--mf-text);
  --muted: var(--mf-muted);
  --yellow: var(--mf-energy);
  --blue: var(--mf-primary);
  --cyan: var(--mf-secondary);
  --green: var(--mf-success);
  --orange: var(--mf-energy);
  --red: var(--mf-danger);
  --shadow: var(--mf-shadow);
  --radius: var(--mf-radius-lg);
  --radius-sm: var(--mf-radius-sm);
  --pro-bg: var(--mf-bg);
  --pro-surface: var(--mf-surface);
  --pro-surface-2: var(--mf-surface-strong);
  --pro-border: var(--mf-line);
  --pro-text: var(--mf-text);
  --pro-muted: var(--mf-muted);
  --pro-yellow: var(--mf-energy);
  --pro-blue: var(--mf-primary);
  --pro-green: var(--mf-success);
  --theme-bg-0: var(--mf-bg);
  --theme-bg-1: var(--mf-bg-raised);
  --theme-bg-2: var(--mf-surface);
  --theme-surface: var(--mf-surface);
  --theme-surface-strong: var(--mf-surface-strong);
  --theme-surface-soft: rgba(114, 174, 252, .10);
  --theme-primary: var(--mf-primary);
  --theme-primary-2: var(--mf-secondary);
  --theme-accent: var(--mf-energy);
  --theme-text: var(--mf-text);
  --theme-muted: var(--mf-muted);
  --theme-border: var(--mf-line);
  --theme-glow: var(--mf-glow);
  --theme-glow-2: var(--mf-energy-glow);
  --theme-shadow: var(--mf-shadow);
  --theme-radius: var(--mf-radius);
  --theme-button-radius: 12px;
}

html[data-melfit-theme="purple-wellness"],
body[data-melfit-theme="purple-wellness"] {
  --mf-bg: #090817;
  --mf-bg-raised: #111027;
  --mf-surface: #191735;
  --mf-surface-strong: #211e43;
  --mf-surface-soft: #2b2755;
  --mf-line: rgba(190, 174, 255, .18);
  --mf-line-strong: rgba(190, 174, 255, .34);
  --mf-text: #faf8ff;
  --mf-muted: #c1b9d9;
  --mf-primary: #a9a6ff;
  --mf-secondary: #d38cdf;
  --mf-energy: #f0b9a2;
  --mf-success: #75d6ac;
  --mf-danger: #ef8e9e;
  --mf-glow: rgba(143, 128, 232, .22);
  --mf-energy-glow: rgba(240, 185, 162, .15);
  --theme-surface-soft: rgba(169, 166, 255, .10);
}

html { background: var(--mf-bg); }
body,
body[data-melfit-theme] {
  color: var(--mf-text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable", "Segoe UI", sans-serif;
  font-size: 16px;
  background:
    radial-gradient(900px 540px at 82% -15%, var(--mf-glow), transparent 66%),
    radial-gradient(720px 440px at -8% 100%, var(--mf-energy-glow), transparent 72%),
    var(--mf-bg);
}

body[data-melfit-theme] .card,
body[data-melfit-theme] .panel,
body[data-melfit-theme] .today-card,
body[data-melfit-theme] .achievement-card {
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius);
  background: var(--mf-surface);
  box-shadow: 0 12px 34px rgba(0, 4, 12, .20);
  backdrop-filter: none;
}

button,
.btn,
input,
select,
textarea { border-radius: var(--mf-radius-sm); }

button,
.btn {
  min-height: 44px;
  transition: transform .16s ease, border-color .16s ease, background-color .16s ease, color .16s ease;
}

button:hover,
.btn:hover { border-color: var(--mf-line-strong); }
button:active,
.btn:active { transform: translateY(1px); }

:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--mf-primary);
  outline-offset: 3px;
  box-shadow: 0 0 0 5px var(--mf-glow);
}

.melfit-root {
  min-height: 100vh;
  min-width: 0;
  max-width: 100%;
  color: var(--mf-text);
  background: transparent;
}
.app-shell,
.main,
.page,
.pro-today-card,
.pro-calorie-row,
.pro-metric-grid { min-width: 0; max-width: 100%; }

/* Login brand moment */
.login-shell { padding: clamp(14px, 4vw, 42px); }
.login-card {
  width: min(1060px, 100%);
  min-height: min(680px, calc(100vh - 48px));
  grid-template-columns: minmax(0, 1.14fr) minmax(340px, .86fr);
  border-color: var(--mf-line);
  border-radius: 28px;
  background: var(--mf-bg-raised);
  box-shadow: var(--mf-shadow);
}
.login-brand {
  min-height: 620px;
  padding: clamp(30px, 5vw, 58px);
  background:
    linear-gradient(145deg, rgba(114, 174, 252, .12), transparent 42%),
    var(--mf-surface);
}
.login-brand::after {
  width: 420px;
  height: 420px;
  right: -240px;
  bottom: -240px;
  border: 1px solid var(--mf-line);
  box-shadow: 0 0 70px var(--mf-glow);
}
.brand-logo {
  border-radius: 12px;
  color: #07111e;
  background: var(--mf-energy);
  box-shadow: 0 8px 24px var(--mf-energy-glow);
}
.performance-graphic {
  position: absolute;
  top: 74px;
  right: 26px;
  width: 270px;
  height: 270px;
  pointer-events: none;
  opacity: .92;
}
.performance-orbit,
.performance-pulse,
.performance-trace { position: absolute; display: block; }
.performance-orbit {
  border: 1px solid var(--mf-line-strong);
  border-radius: 50%;
}
.orbit-one { inset: 32px; transform: rotate(-18deg); border-right-color: var(--mf-primary); }
.orbit-two { inset: 70px 18px; transform: rotate(24deg); border-top-color: var(--mf-secondary); }
.performance-pulse {
  top: 124px;
  left: 124px;
  width: 20px;
  height: 20px;
  border: 5px solid rgba(255,255,255,.82);
  border-radius: 50%;
  background: var(--mf-primary);
  box-shadow: 0 0 32px var(--mf-primary);
}
.performance-trace {
  left: 36px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, var(--mf-primary), transparent);
}
.trace-one { top: 102px; width: 112px; }
.trace-two { top: 126px; width: 78px; left: 153px; background: linear-gradient(90deg, transparent, var(--mf-secondary)); }
.trace-three { top: 154px; width: 152px; left: 61px; opacity: .54; }
.login-copy { max-width: 590px; }
.login-copy h1 {
  max-width: 620px;
  font-size: clamp(2.8rem, 5.6vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.068em;
}
.login-copy p { color: var(--mf-muted); font-size: 1rem; }
.eyebrow,
.pro-eyebrow,
.settings-kicker {
  color: var(--mf-primary);
  letter-spacing: .10em;
  text-transform: uppercase;
}
.login-features { gap: 9px; }
.login-feature {
  padding: 9px 12px;
  border-radius: 10px;
  border-color: var(--mf-line);
  background: rgba(255,255,255,.025);
}
.login-form-wrap { padding: clamp(28px, 4.5vw, 52px); }
.account-card {
  min-height: 112px;
  border-radius: 14px;
  background: rgba(255,255,255,.025);
}
.account-card:hover,
.account-card.selected {
  transform: none;
  border-color: var(--mf-primary);
  background: rgba(114,174,252,.08);
}
.account-avatar { background: var(--mf-primary); border-radius: 10px; }
.demo-note {
  border-left: 2px solid var(--mf-line-strong);
  border-radius: 0;
  background: transparent;
  color: var(--mf-muted);
}

/* App shell and navigation */
.sidebar {
  width: 248px;
  padding: 24px 16px;
  border-right: 1px solid var(--mf-line);
  background: rgba(5, 11, 20, .97);
}
.sidebar-brand { padding: 0 8px 22px; }
.sidebar-brand .brand-logo { width: 38px; height: 38px; }
.nav { gap: 4px; }
.nav-btn {
  min-height: 46px;
  gap: 12px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 11px;
  color: var(--mf-muted);
  font-size: .84rem;
}
.nav-btn:hover { color: var(--mf-text); background: rgba(255,255,255,.03); }
.nav-btn.active {
  color: var(--mf-text);
  border-color: var(--mf-line);
  background: linear-gradient(90deg, rgba(114,174,252,.14), rgba(114,174,252,.035));
  box-shadow: inset 3px 0 0 var(--mf-primary);
}
.nav-icon {
  position: relative;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  color: var(--mf-primary);
  font-size: 1rem;
  font-style: normal;
}
.nav-icon::before,
.nav-icon::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
}
[data-page="overview"] > .nav-icon::before { inset: 4px; border: 1.8px solid currentColor; border-radius: 4px; }
[data-page="overview"] > .nav-icon::after { width: 7px; height: 7px; left: 7px; top: 1px; border-left: 1.8px solid currentColor; border-top: 1.8px solid currentColor; transform: rotate(45deg); background: var(--mf-bg); }
[data-page="food"] > .nav-icon::before { inset: 3px; border: 1.8px solid currentColor; border-radius: 50%; }
[data-page="food"] > .nav-icon::after { width: 1.8px; height: 11px; right: 3px; top: 5px; border-radius: 2px; background: currentColor; }
[data-page="strength"] > .nav-icon::before { width: 16px; height: 2px; left: 3px; top: 10px; background: currentColor; }
[data-page="strength"] > .nav-icon::after { width: 4px; height: 12px; left: 5px; top: 5px; border: 1.8px solid currentColor; border-radius: 2px; box-shadow: 8px 0 0 -1.8px var(--mf-bg), 8px 0 0 0 currentColor; }
[data-page="activity"] > .nav-icon::before { width: 13px; height: 13px; left: 4px; top: 5px; border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor; transform: rotate(-12deg); }
[data-page="activity"] > .nav-icon::after { width: 13px; height: 1.8px; left: 4px; top: 11px; background: currentColor; transform: rotate(-45deg); }
[data-page="progress"] > .nav-icon::before { width: 3px; height: 7px; left: 4px; bottom: 4px; border-radius: 1px; background: currentColor; box-shadow: 6px -4px 0 currentColor, 12px -9px 0 currentColor; }
[data-page="calendar"] > .nav-icon::before { inset: 4px 3px 3px; border: 1.8px solid currentColor; border-radius: 3px; }
[data-page="calendar"] > .nav-icon::after { left: 4px; right: 4px; top: 8px; height: 1.8px; background: currentColor; box-shadow: 3px -5px 0 -0.4px currentColor, 9px -5px 0 -0.4px currentColor; }
[data-page="challenge"] > .nav-icon::before { inset: 3px; border: 1.8px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--mf-bg); background: currentColor; }
[data-page="settings"] > .nav-icon::before { inset: 4px; border: 1.8px solid currentColor; border-radius: 50%; box-shadow: 0 -3px 0 -1px currentColor, 0 3px 0 -1px currentColor, 3px 0 0 -1px currentColor, -3px 0 0 -1px currentColor; }
[data-page="settings"] > .nav-icon::after { inset: 9px; border-radius: 50%; background: currentColor; }
.nav-icon-more::before { width: 4px; height: 4px; left: 3px; top: 9px; border-radius: 50%; background: currentColor; box-shadow: 6px 0 currentColor, 12px 0 currentColor; }
.sidebar-user {
  border-color: var(--mf-line);
  border-radius: 14px;
  background: var(--mf-bg-raised);
}
.user-avatar { background: var(--mf-primary); color: #07111e; }
.main {
  max-width: none;
  margin-left: 0;
  padding: 0 34px 44px;
}
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  min-height: 86px;
  margin: 0 -34px 28px;
  padding: 16px 34px;
  border-bottom: 1px solid var(--mf-line);
  background: rgba(5, 11, 20, .92);
  backdrop-filter: blur(14px);
}
.topbar h1 { font-size: 1.35rem; letter-spacing: -.035em; }
.topbar p { margin-top: 4px; font-size: .78rem; }
.sync-status,
.date-control {
  min-height: 42px;
  border: 1px solid var(--mf-line);
  border-radius: 11px;
  background: var(--mf-bg-raised);
}
.sync-dot { box-shadow: 0 0 12px currentColor; }
.date-control input { font-variant-numeric: tabular-nums; }

/* Signature Today experience */
.pro-today-card {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 14px;
  padding: clamp(18px, 2.4vw, 30px);
  overflow: hidden;
  border: 1px solid var(--mf-line);
  border-radius: var(--mf-radius-lg);
  background:
    radial-gradient(460px 260px at 84% 0%, var(--mf-glow), transparent 72%),
    linear-gradient(150deg, var(--mf-surface-strong), var(--mf-bg-raised) 66%);
  box-shadow: var(--mf-shadow);
}
.pro-today-card::before {
  content: "";
  position: absolute;
  width: 430px;
  height: 430px;
  right: -250px;
  top: -250px;
  border: 1px solid var(--mf-line);
  border-radius: 50%;
  pointer-events: none;
}
.pro-today-card > * { position: relative; z-index: 1; }
.pro-today-head {
  grid-column: 1 / -1;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 5px;
}
.pro-eyebrow { color: var(--mf-secondary); font-size: .68rem; }
.pro-today-head h2 { margin-top: 7px; font-size: clamp(1.6rem, 3vw, 2.45rem); }
.pro-today-head p { margin-top: 6px; color: var(--mf-muted); font-size: .84rem; }
.pro-add-button {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  border-color: transparent;
  color: #07111e;
  background: var(--mf-energy);
  box-shadow: 0 10px 28px var(--mf-energy-glow);
}
.pro-calorie-row {
  grid-column: span 5;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 132px;
  align-items: center;
  gap: 22px;
  min-height: 210px;
  margin: 0;
  padding: 24px;
  border: 1px solid var(--mf-line);
  border-radius: 19px;
  background: rgba(2, 8, 15, .30);
}
.pro-calorie-main > span {
  display: block;
  color: var(--mf-muted);
  font-size: .78rem;
}
.pro-calorie-main > strong {
  display: flex;
  align-items: baseline;
  gap: 7px;
  white-space: nowrap;
  margin-top: 8px;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.065em;
}
.pro-calorie-main > strong > span {
  display: inline;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
}
.pro-calorie-main > strong > small { font-size: .78rem; letter-spacing: 0; }
.pro-calorie-main > em {
  display: block;
  margin-top: 6px;
  color: var(--mf-muted);
  font-size: .72rem;
  font-style: normal;
}
.energy-orbit-wrap {
  position: relative;
  display: grid;
  place-items: center;
  width: 132px;
  height: 132px;
}
.energy-orbit-wrap::before,
.energy-orbit-wrap::after {
  content: "";
  position: absolute;
  border: 1px solid var(--mf-line);
  border-radius: 50%;
  pointer-events: none;
}
.energy-orbit-wrap::before { inset: -8px; border-right-color: var(--mf-secondary); transform: rotate(-22deg); }
.energy-orbit-wrap::after { inset: 5px -14px; border-left-color: var(--mf-primary); transform: rotate(28deg); }
.pro-progress-ring {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  overflow: hidden;
  background: conic-gradient(var(--mf-secondary) calc(var(--pro-pct) * 1%), rgba(255,255,255,.07) 0);
  filter: drop-shadow(0 0 18px var(--mf-glow));
}
.pro-progress-ring::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: var(--mf-bg-raised);
}
.pro-progress-ring span {
  position: relative;
  z-index: 1;
  display: block;
  font-size: .86rem;
  font-weight: 850;
  font-variant-numeric: tabular-nums;
}
.pro-metric-grid {
  grid-column: span 7;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
}
.pro-metric-grid button {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 100px;
  padding: 15px;
  border: 1px solid var(--mf-line);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
}
.pro-metric-grid span,
.pro-metric-grid strong,
.pro-metric-grid small { display: block; }
.pro-metric-grid button::after { background: var(--mf-primary); }
.pro-metric-grid button:nth-child(2)::after { background: var(--mf-energy); }
.pro-metric-grid button:nth-child(3)::after { background: var(--mf-secondary); }
.pro-metric-grid button:nth-child(4)::after { background: var(--mf-success); }
.pro-metric-grid span { color: var(--mf-muted); font-size: .72rem; }
.pro-metric-grid strong { margin-top: 7px; font-size: 1.35rem; font-variant-numeric: tabular-nums; }
.pro-metric-grid small { margin-top: 4px; color: var(--mf-muted); font-size: .68rem; }
.pro-primary-actions {
  grid-column: span 5;
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin: 0;
  gap: 8px;
}
.pro-primary-actions button {
  min-height: 52px;
  border: 1px solid var(--mf-line);
  border-radius: 13px;
  background: rgba(255,255,255,.03);
  font-size: .74rem;
}
.pro-primary-actions button span { color: var(--mf-primary); }
.pro-personal-focus {
  grid-column: span 7;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0;
  padding: 17px;
}
.pro-focus-copy { min-width: 0; }
.pro-focus-copy span { display: block; font-size: .68rem; font-weight: 850; letter-spacing: .08em; }
.pro-focus-copy strong { display: block; margin-top: 5px; font-size: 1rem; }
.pro-focus-copy small { display: block; margin-top: 4px; color: var(--mf-muted); font-size: .76rem; }
.pro-focus-actions { display: flex; flex: 0 0 auto; gap: 8px; }
.pro-focus-actions button {
  min-height: 42px;
  padding: 8px 13px;
  border: 1px solid var(--mf-line);
  color: var(--mf-text);
  background: rgba(255,255,255,.035);
  font-size: .75rem;
  font-weight: 800;
}
.pro-focus-actions button:first-child { color: #07111e; border-color: transparent; background: var(--mf-energy); }
.pro-smart-suggestions { grid-column: span 6; margin: 0; padding: 17px; }
.pro-smart-head,
.pro-achievement-head,
.pro-weekly-report-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pro-smart-head span,
.pro-achievement-head span,
.pro-weekly-report-head span { display: block; font-size: .68rem; font-weight: 850; letter-spacing: .08em; }
.pro-smart-head small { color: var(--mf-muted); font-size: .72rem; }
.pro-suggestion-list { display: grid; gap: 8px; margin-top: 10px; }
.pro-suggestion-list button {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 4px 12px;
  min-height: 68px;
  padding: 12px;
  border: 1px solid var(--mf-line);
  color: var(--mf-text);
  background: rgba(255,255,255,.025);
  text-align: left;
}
.pro-suggestion-list strong { display: block; font-size: .84rem; }
.pro-suggestion-list small { display: block; color: var(--mf-muted); font-size: .74rem; }
.pro-achievement-card { grid-column: span 6; margin: 0; padding: 17px; }
.pro-achievement-head strong { display: block; margin-top: 4px; font-size: .95rem; }
.pro-achievement-head > button,
.pro-weekly-report-head > button {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--mf-line);
  color: var(--mf-text);
  background: rgba(255,255,255,.035);
  font-size: .74rem;
  font-weight: 800;
}
.pro-achievement-grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  margin-top: 14px;
}
.pro-achievement-grid button {
  min-height: 88px;
  padding: 10px 7px;
  border: 1px solid var(--mf-line);
  border-radius: 12px;
  color: var(--mf-text);
  background: rgba(255,255,255,.025);
  text-align: center;
}
.pro-achievement-grid strong,
.pro-achievement-grid small { display: block; }
.pro-achievement-grid strong { margin-top: 5px; font-size: 1rem; font-variant-numeric: tabular-nums; }
.pro-achievement-grid small { margin-top: 3px; color: var(--mf-muted); font-size: .68rem; }
.pro-weekly-report { grid-column: 1 / -1; margin: 0; padding: 17px; }
.pro-weekly-report-head strong { display: block; margin-top: 4px; font-size: .95rem; }
.pro-weekly-metrics {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 9px;
  margin-top: 14px;
}
.pro-weekly-metrics div {
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--mf-line);
  border-radius: 11px;
  background: rgba(255,255,255,.02);
  text-align: center;
}
.pro-weekly-metrics span,
.pro-weekly-metrics strong { display: block; }
.pro-weekly-metrics span { color: var(--mf-muted); font-size: .7rem; }
.pro-weekly-metrics strong { margin-top: 5px; font-size: .9rem; font-variant-numeric: tabular-nums; }
.pro-personal-focus,
.pro-smart-suggestions,
.pro-achievement-card,
.pro-weekly-report {
  border-color: var(--mf-line);
  border-radius: var(--mf-radius);
  background: rgba(2, 8, 15, .28);
}
.pro-focus-copy span,
.pro-smart-head span,
.pro-achievement-head span,
.pro-weekly-report-head span { color: var(--mf-primary); }

#page-overview > .step-quick-card,
#page-overview > .kpi-grid,
#page-overview > .mobile-overview-actions,
#page-overview > .overview-main-grid,
#page-overview > .overview-insights-grid { display: none !important; }
#page-overview.active { overflow: visible !important; }

/* Secondary pages */
.page > .panel,
.page > .grid,
.activity-layout { max-width: 1440px; margin-inline: auto; }
.panel {
  border-radius: var(--mf-radius) !important;
  border-color: var(--mf-line) !important;
  background: var(--mf-surface) !important;
  box-shadow: 0 10px 30px rgba(0,4,12,.16) !important;
}
.panel-head {
  padding-bottom: 13px;
  border-bottom: 1px solid var(--mf-line);
}
.panel-head h2 { font-size: 1.02rem; letter-spacing: -.022em; }
.panel-head p { margin-top: 5px; color: var(--mf-muted); font-size: .76rem; }
label { color: var(--mf-muted); font-size: .75rem; }
input,
select,
textarea,
body[data-melfit-theme] input,
body[data-melfit-theme] select,
body[data-melfit-theme] textarea {
  min-height: 46px;
  color: var(--mf-text);
  border: 1px solid var(--mf-line);
  background: var(--mf-bg-raised);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--mf-primary);
  box-shadow: 0 0 0 3px var(--mf-glow);
}
.compact-section-tabs {
  min-height: 48px;
  border: 1px solid var(--mf-line);
  border-radius: 13px;
  background: var(--mf-bg-raised);
}
.compact-section-tab { min-height: 42px; color: var(--mf-muted); font-size: .72rem; }
.compact-section-tab.active { color: var(--mf-text); background: var(--mf-surface-soft); }
.empty-state { min-height: 180px; border: 1px dashed var(--mf-line-strong); background: rgba(255,255,255,.015); }

/* Settings hierarchy */
#page-settings > .grid.two {
  grid-template-columns: minmax(0, 1.05fr) minmax(390px, .95fr);
  align-items: start;
  gap: 18px;
}
#page-settings > .grid.two > div { display: grid; gap: 14px; }
#page-settings .panel { padding: 20px; }
.premium-theme-card { grid-column: auto; }
.settings-kicker {
  display: block;
  margin-bottom: 6px;
  font-size: .64rem;
  font-weight: 850;
}
.theme-picker { gap: 9px; margin-top: 14px; }
.theme-option {
  grid-template-columns: 64px minmax(0,1fr);
  min-height: 84px;
  padding: 10px;
  border-radius: 13px;
  background: var(--mf-bg-raised);
}
.theme-option:hover { transform: none; background: var(--mf-surface-soft); }
.theme-option.active {
  border-color: var(--mf-primary);
  background: var(--mf-surface-soft);
  box-shadow: inset 3px 0 0 var(--mf-primary);
}
.theme-preview { width: 64px; height: 48px; border-radius: 10px; }
.theme-option strong { font-size: .76rem; }
.theme-option small { font-size: .66rem; line-height: 1.35; }
.danger-zone { border-color: rgba(239,137,136,.28) !important; }

/* Sheets, status and feedback */
.fast-add-backdrop,
.mobile-more-backdrop { background: rgba(1, 5, 11, .78); }
.fast-add-panel,
.mobile-more-sheet {
  border-color: var(--mf-line);
  background: var(--mf-bg-raised);
  box-shadow: 0 28px 90px rgba(0,0,0,.64);
}
.toast {
  min-height: 44px;
  border: 1px solid var(--mf-line-strong);
  border-radius: 12px;
  background: var(--mf-surface-strong);
}

@media (max-width: 1100px) {
  .main { padding-inline: 22px; }
  .topbar { margin-inline: -22px; padding-inline: 22px; }
  .pro-calorie-row,
  .pro-metric-grid { grid-column: 1 / -1; }
  .pro-primary-actions,
  .pro-personal-focus { grid-column: span 6; }
}

@media (max-width: 900px) {
  html,
  body.melfit-direct-page,
  body.melfit-shortcode-page {
    height: auto;
    min-height: 100%;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
  .melfit-root,
  .app-shell {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }
  .main {
    margin-left: 0;
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding: 0 max(12px, env(safe-area-inset-right)) calc(96px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  }
  .topbar {
    min-height: 62px;
    height: auto;
    margin: 0 -12px 12px;
    padding: 9px max(12px, env(safe-area-inset-right)) 9px max(12px, env(safe-area-inset-left)) !important;
    background: rgba(5, 11, 20, .94);
  }
  .topbar > div:first-child h1 { font-size: .96rem !important; }
  .topbar-actions .date-control { min-height: 38px; }
  .sync-status { min-height: 38px; border-radius: 10px; font-size: .62rem; }
  .pro-today-card {
    display: grid;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    min-height: auto;
    padding: 16px;
    gap: 10px;
    border-radius: 20px;
  }
  #page-overview.active {
    height: auto;
    min-height: 0;
    overflow: visible !important;
  }
  .pro-calorie-row {
    width: 100%;
    min-width: 0;
    min-height: 158px;
    padding: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(86px, 104px);
    gap: 10px;
  }
  .pro-calorie-main { min-width: 0; }
  .pro-calorie-main > strong {
    max-width: 100%;
    font-size: clamp(2rem, 10vw, 3rem);
  }
  .pro-calorie-main strong { font-size: clamp(2.15rem, 11vw, 3.2rem); }
  .energy-orbit-wrap { width: 96px; height: 96px; max-width: 100%; justify-self: end; }
  .pro-progress-ring { width: 86px; height: 86px; }
  .pro-metric-grid { grid-column: 1 / -1; gap: 7px; }
  .pro-metric-grid,
  .pro-primary-actions,
  .pro-mobile-nav { min-width: 0; max-width: 100%; }
  .pro-metric-grid button { min-height: 84px; padding: 12px; }
  .pro-metric-grid span { font-size: .7rem; }
  .pro-metric-grid strong { font-size: 1.12rem; }
  .pro-metric-grid small { font-size: .66rem; }
  .pro-primary-actions,
  .pro-personal-focus,
  .pro-smart-suggestions,
  .pro-achievement-card,
  .pro-weekly-report { grid-column: 1 / -1; }
  .pro-primary-actions button { min-height: 48px; font-size: .72rem; }
  #page-settings > .grid.two { grid-template-columns: 1fr; gap: 12px; }
  #page-settings > .grid.two > .panel,
  #page-settings > .grid.two > div > .panel { display: none; }
  #page-settings[data-compact-view="profile"] > .grid.two > .panel,
  #page-settings[data-compact-view="password"] > .grid.two > div > .panel:nth-child(1),
  #page-settings[data-compact-view="appearance"] > .grid.two > div > .panel:nth-child(4),
  #page-settings[data-compact-view="app"] > .grid.two > div > .panel:nth-child(3),
  #page-settings[data-compact-view="app"] > .grid.two > div > .panel:nth-child(5),
  #page-settings[data-compact-view="data"] > .grid.two > div > .panel:nth-child(2),
  #page-settings[data-compact-view="data"] > .grid.two > div > .panel:nth-child(6) { display: block; }
  #page-settings .panel { padding: 15px; }
  .pro-mobile-nav {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: calc(8px + env(safe-area-inset-bottom));
    height: calc(70px + env(safe-area-inset-bottom));
    padding-bottom: calc(6px + env(safe-area-inset-bottom));
    border: 1px solid var(--mf-line);
    border-radius: 18px;
    background: rgba(8,20,34,.98);
  }
  .pro-mobile-nav .nav-btn { min-height: 48px; font-size: .62rem; }
  .pro-mobile-nav .nav-icon { color: var(--mf-primary); }
  .pro-nav-add {
    min-height: 62px;
    border-radius: 16px;
    background: var(--mf-energy);
  }
}

@media (max-width: 720px) {
  .login-shell { display: block; padding: 0; }
  .login-card {
    min-height: 100dvh;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
  }
  .login-brand {
    min-height: 300px;
    padding: 28px 22px;
  }
  .performance-graphic {
    width: 190px;
    height: 190px;
    top: 34px;
    right: -20px;
    opacity: .58;
    transform: scale(.8);
  }
  .login-copy h1 { max-width: 430px; font-size: clamp(2.35rem, 12vw, 3.7rem); }
  .login-copy p { max-width: 460px; font-size: .88rem; }
  .login-features { display: none; }
  .login-form-wrap { padding: 26px 20px max(30px, env(safe-area-inset-bottom)); }
  .theme-picker { grid-template-columns: 1fr; }
}

@media (max-width: 390px) {
  .pro-today-card { padding: 13px; }
  .pro-today-head h2 { font-size: 1.45rem; }
  .pro-today-head p { font-size: .74rem; }
  .pro-calorie-row {
    min-height: 140px;
    grid-template-columns: minmax(0,1fr) 88px;
    padding: 13px;
  }
  .energy-orbit-wrap { width: 84px; height: 84px; }
  .pro-progress-ring { width: 72px; height: 72px; }
  .pro-calorie-main strong { font-size: 2rem; }
  .pro-achievement-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 330px) {
  .topbar .sync-status { display: none; }
  .pro-calorie-row { grid-template-columns: minmax(0,1fr) 72px; }
  .energy-orbit-wrap { width: 68px; height: 68px; }
  .pro-progress-ring { width: 60px; height: 60px; }
  .pro-calorie-main strong { font-size: 1.75rem; }
  .theme-option { grid-template-columns: 54px minmax(0,1fr); }
  .theme-preview { width: 54px; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 4.1 refinements: theme previews, recovery mood and readable compact UI */
.theme-picker {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.theme-option {
  display: grid;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 3px 12px;
  color: var(--mf-text);
  text-align: left;
  cursor: pointer;
}
.theme-option strong,
.theme-option small { grid-column: 2; }
.theme-preview {
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-end;
  gap: 5px;
  padding: 8px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}
.theme-preview i { display: block; flex: 1; border-radius: 4px 4px 2px 2px; }
.theme-preview i:nth-child(1) { height: 44%; }
.theme-preview i:nth-child(2) { height: 78%; }
.theme-preview i:nth-child(3) { height: 60%; }
.blue-performance-preview { background: linear-gradient(145deg,#07111f,#173a65); }
.blue-performance-preview i:nth-child(1) { background:#72aefc; }
.blue-performance-preview i:nth-child(2) { background:#62d8df; }
.blue-performance-preview i:nth-child(3) { background:#f3bd66; }
.purple-wellness-preview { background: radial-gradient(circle at 75% 10%,#4a3565,transparent 55%),linear-gradient(145deg,#100e27,#28234e); }
.purple-wellness-preview i { border-radius: 8px 8px 3px 3px; }
.purple-wellness-preview i:nth-child(1) { height: 56%; background:#aaa6ff; }
.purple-wellness-preview i:nth-child(2) { height: 68%; background:#d38cdf; }
.purple-wellness-preview i:nth-child(3) { height: 48%; background:#f0b9a2; }

body[data-melfit-theme="purple-wellness"] {
  background:
    radial-gradient(780px 520px at 88% -8%, rgba(211,140,223,.16), transparent 70%),
    radial-gradient(680px 440px at -4% 100%, rgba(240,185,162,.10), transparent 74%),
    var(--mf-bg);
}
body[data-melfit-theme="purple-wellness"] .panel,
body[data-melfit-theme="purple-wellness"] .card {
  border-color: rgba(190,174,255,.15);
  border-radius: 20px !important;
  box-shadow: 0 12px 32px rgba(5,3,20,.14) !important;
}
body[data-melfit-theme="purple-wellness"] .login-brand {
  background:
    radial-gradient(circle at 80% 18%, rgba(211,140,223,.16), transparent 34%),
    linear-gradient(155deg, rgba(169,166,255,.10), transparent 52%),
    var(--mf-surface);
}
body[data-melfit-theme="purple-wellness"] .performance-trace { opacity: .28; }
body[data-melfit-theme="purple-wellness"] .performance-pulse {
  border-color: rgba(255,255,255,.70);
  background: var(--mf-secondary);
  box-shadow: 0 0 38px rgba(211,140,223,.40);
}
body[data-melfit-theme="purple-wellness"] .pro-today-card {
  border-radius: 28px;
  background:
    radial-gradient(520px 300px at 86% 2%, rgba(211,140,223,.14), transparent 72%),
    radial-gradient(420px 240px at 8% 100%, rgba(240,185,162,.08), transparent 74%),
    linear-gradient(155deg, #211e43, #111027 68%);
  box-shadow: 0 22px 58px rgba(5,3,20,.24);
}
body[data-melfit-theme="purple-wellness"] .pro-today-card::before {
  border-color: rgba(211,140,223,.15);
  transform: scaleY(.78) rotate(-9deg);
}
body[data-melfit-theme="purple-wellness"] .pro-calorie-row,
body[data-melfit-theme="purple-wellness"] .pro-personal-focus,
body[data-melfit-theme="purple-wellness"] .pro-smart-suggestions,
body[data-melfit-theme="purple-wellness"] .pro-achievement-card,
body[data-melfit-theme="purple-wellness"] .pro-weekly-report {
  border-color: rgba(190,174,255,.14);
  background: rgba(31,27,66,.48);
}
body[data-melfit-theme="purple-wellness"] .pro-progress-ring {
  background: conic-gradient(var(--mf-primary) calc(var(--pro-pct) * 1%), rgba(255,255,255,.07) 0);
  filter: drop-shadow(0 0 14px rgba(169,166,255,.20));
}
body[data-melfit-theme="purple-wellness"] .energy-orbit-wrap::before {
  border-color: rgba(211,140,223,.30);
  transform: rotate(-9deg) scaleY(.88);
}
body[data-melfit-theme="purple-wellness"] .energy-orbit-wrap::after {
  border-color: rgba(169,166,255,.26);
  transform: rotate(13deg) scaleX(.90);
}
body[data-melfit-theme="purple-wellness"] .pro-personal-focus {
  background: linear-gradient(135deg, rgba(211,140,223,.10), rgba(31,27,66,.50));
}
body[data-melfit-theme="purple-wellness"] .pro-achievement-card {
  border-color: rgba(240,185,162,.22);
  background: linear-gradient(145deg, rgba(240,185,162,.08), rgba(31,27,66,.44));
}
body[data-melfit-theme="purple-wellness"] .pro-achievement-head span,
body[data-melfit-theme="purple-wellness"] .pro-achievement-grid > button > span { color: var(--mf-energy); }

/* One consistent CSS icon language for quick actions and More. */
:where(.pro-primary-actions,.fast-action-grid,.mobile-more-links) button > span:first-child {
  position: relative;
  display: inline-grid;
  width: 22px;
  height: 22px;
  place-items: center;
  color: transparent !important;
  font-size: 0 !important;
}
:where(.pro-primary-actions,.fast-action-grid,.mobile-more-links) button > span:first-child::before,
:where(.pro-primary-actions,.fast-action-grid,.mobile-more-links) button > span:first-child::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  color: var(--mf-primary);
}
[data-fast-pane="food"] > span:first-child::before { inset: 3px; border: 1.8px solid currentColor; border-radius: 50%; }
[data-fast-pane="food"] > span:first-child::after { width: 1.8px; height: 12px; right: 2px; top: 5px; border-radius: 2px; background: currentColor; }
[data-fast-pane="strength"] > span:first-child::before { width: 17px; height: 2px; left: 2px; top: 10px; background: currentColor; }
[data-fast-pane="strength"] > span:first-child::after { width: 4px; height: 13px; left: 4px; top: 4px; border: 1.8px solid currentColor; border-radius: 2px; box-shadow: 9px 0 0 -1.8px var(--mf-surface),9px 0 0 currentColor; }
[data-fast-pane="steps"] > span:first-child::before,
[data-fast-pane="activity"] > span:first-child::before,
[data-more-page="activity"] > span:first-child::before { width: 14px; height: 14px; left: 4px; top: 4px; border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor; transform: rotate(-12deg); }
[data-fast-pane="steps"] > span:first-child::after,
[data-fast-pane="activity"] > span:first-child::after,
[data-more-page="activity"] > span:first-child::after { width: 14px; height: 1.8px; left: 4px; top: 10px; background: currentColor; transform: rotate(-45deg); }
[data-fast-pane="water"] > span:first-child::before { width: 13px; height: 13px; left: 4px; top: 3px; border: 1.8px solid currentColor; border-radius: 9px 9px 9px 2px; transform: rotate(45deg); }
[data-fast-pane="weight"] > span:first-child::before { inset: 3px 2px; border: 1.8px solid currentColor; border-radius: 5px; }
[data-fast-pane="weight"] > span:first-child::after { width: 7px; height: 4px; top: 6px; border: 1.8px solid currentColor; border-bottom: 0; border-radius: 6px 6px 0 0; }
[data-page-jump="calendar"] > span:first-child::before,
[data-more-page="calendar"] > span:first-child::before { inset: 3px; border: 1.8px solid currentColor; border-radius: 3px; }
[data-page-jump="calendar"] > span:first-child::after,
[data-more-page="calendar"] > span:first-child::after { left: 4px; right: 4px; top: 8px; height: 1.8px; background: currentColor; }
[data-more-page="challenge"] > span:first-child::before { inset: 2px; border: 1.8px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--mf-surface); background: currentColor; }
[data-more-page="progress"] > span:first-child::before { width: 3px; height: 7px; left: 3px; bottom: 3px; border-radius: 1px; background: currentColor; box-shadow: 6px -4px currentColor,12px -9px currentColor; }
[data-more-page="settings"] > span:first-child::before { inset: 3px; border: 1.8px solid currentColor; border-radius: 50%; }
.mobile-more-links .js-logout > span:first-child::before { width: 13px; height: 15px; left: 2px; top: 3px; border: 1.8px solid currentColor; border-right: 0; border-radius: 3px 0 0 3px; }
.mobile-more-links .js-logout > span:first-child::after { width: 11px; height: 1.8px; right: 1px; top: 10px; background: currentColor; box-shadow: 4px -3px 0 -0.4px currentColor,4px 3px 0 -0.4px currentColor; }
.pro-achievement-grid button > span:first-child {
  position: relative;
  display: block;
  width: 22px;
  height: 22px;
  margin: 0 auto;
  color: transparent !important;
  font-size: 0 !important;
}
.pro-achievement-grid button > span:first-child::before,
.pro-achievement-grid button > span:first-child::after {
  content: "";
  position: absolute;
  box-sizing: border-box;
  color: var(--mf-primary);
}
.pro-achievement-grid button:nth-child(1) > span::before { width: 13px; height: 13px; left: 4px; top: 5px; border-right: 1.8px solid currentColor; border-top: 1.8px solid currentColor; }
.pro-achievement-grid button:nth-child(1) > span::after { width: 13px; height: 1.8px; left: 4px; top: 11px; background: currentColor; transform: rotate(-45deg); }
.pro-achievement-grid button:nth-child(2) > span::before { width: 16px; height: 2px; left: 3px; top: 10px; background: currentColor; }
.pro-achievement-grid button:nth-child(2) > span::after { width: 4px; height: 12px; left: 5px; top: 5px; border: 1.8px solid currentColor; border-radius: 2px; box-shadow: 8px 0 0 -1.8px var(--mf-surface),8px 0 0 currentColor; }
.pro-achievement-grid button:nth-child(3) > span::before { width: 13px; height: 7px; left: 4px; top: 6px; border-left: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); }
.pro-achievement-grid button:nth-child(4) > span::before { inset: 3px; border: 1.8px solid currentColor; border-radius: 50%; box-shadow: inset 0 0 0 4px var(--mf-surface); background: currentColor; }

/* Collaborative challenge, not an opposing scoreboard. */
.challenge-scoreboard {
  grid-template-columns: minmax(0,1fr) 34px minmax(0,1fr);
  gap: 10px;
}
.team-score {
  grid-column: 1 / -1;
  padding: 17px;
  border: 1px solid var(--mf-line);
  border-radius: 15px;
  background: rgba(255,255,255,.025);
  text-align: center;
}
.team-score span,
.team-score small { display: block; color: var(--mf-muted); font-size: .78rem; }
.team-score strong { display: block; margin: 5px 0; font-size: 1.55rem; font-variant-numeric: tabular-nums; }
.versus { min-height: 44px; display: grid; place-items: center; color: var(--mf-muted); background: transparent; }
.versus span { width: 22px; height: 1px; background: var(--mf-line-strong); }
.score-person,
.score-person.leading {
  border-color: var(--mf-line);
  background: rgba(255,255,255,.02);
  transform: none;
  box-shadow: none;
}

@media (max-width: 900px) {
  /* 12px metadata floor and 13px interactive floor. */
  .page small,
  .page label,
  .page .muted,
  .page .panel-head p,
  .page .settings-note,
  .pro-eyebrow,
  .pro-today-head p,
  .pro-calorie-main > span,
  .pro-calorie-main em,
  .pro-metric-grid span,
  .pro-metric-grid small,
  .pro-focus-copy span,
  .pro-focus-copy small,
  .pro-smart-head span,
  .pro-smart-head small,
  .pro-suggestion-list small,
  .pro-achievement-card small,
  .pro-weekly-report small,
  .theme-option small {
    font-size: .75rem !important;
    line-height: 1.4;
  }
  .sync-status,
  .date-control input,
  .pro-weekly-metrics span,
  .pro-journey-labels span,
  .pro-week-head span,
  .app-status-row,
  .activity-stats span,
  .activity-history-card small,
  .challenge-pill,
  .fast-add-header div span,
  .fast-section-label,
  .fast-big-input > span,
  .fast-current-value > span,
  .fast-add-panel small {
    font-size: .75rem !important;
    line-height: 1.4;
  }
  .page button,
  .compact-section-tab,
  .pro-primary-actions button,
  .pro-focus-actions button,
  .pro-mobile-nav .nav-btn,
  .pro-nav-add small,
  .theme-option strong {
    font-size: .8125rem !important;
  }
  .mobile-more-links button,
  .fast-add-panel button,
  .fast-add-panel strong { font-size: .8125rem !important; }
  .compact-section-tabs {
    min-height: 50px;
    height: auto !important;
    overflow-x: auto;
    grid-auto-flow: column;
    grid-auto-columns: minmax(82px,1fr);
  }
  .compact-section-tab { min-height: 46px; white-space: nowrap; }
  .challenge-scoreboard { grid-template-columns: minmax(0,1fr) 22px minmax(0,1fr); }
  .challenge-scoreboard .team-score { grid-column: 1 / -1; }
  .theme-picker { grid-template-columns: 1fr; }
}