@media (max-width: 480px) {
  body {
    margin: 5px;
    font-size: 1.1rem; /* basfont större */
  }

  h1 {
    font-size: 2rem; /* större rubrik */
  }

  .box, .wrapper {
    width: 90%;       /* nästan full bredd */
    padding: 25px 0;    /* mer luft i boxen */
  }

  input, button {
    padding: 15px;    /* lättare att trycka på */
    font-size: 1.2rem; /* större text */
  }
  button {
    width: 100%;
    max-width: 320px;
    min-width: 0;
    height: 92px;
  }

  .stats {
    font-size: 1.1rem; 
  }

  .small {
    font-size: 1rem;
  }
}
body {
      font-family: Arial, sans-serif;
      background: #f9f8f5;
      text-align: center;
      margin: 40px;
    }
    a {
    color: #333;
    }
    h1 {
      font-size: 2.6rem;
    }
    .box {
      background: #ffffff;
      border-radius: 14px;
      box-shadow: 0 8px 20px rgba(18, 58, 70, 0.08);
      padding: 18px 16px 16px;
      margin: 18px auto;
      max-width: 420px;
      width: 90%;
    }
    .wrapper {
    width: 90%;       /* nästan full bredd */
    padding: 0;    /* mer luft i boxen */
    margin: auto;
  }
    input, button {
    font-size: 1.1rem;
    padding: 10px;
    margin: 5px;
    border: none;
    border-radius: 10px;
    }
    button {
    height: 96px;
    min-width: 240px;
    padding: 0 28px;
    background: linear-gradient(180deg, #2c7b92 0%, #226579 100%);
    color: #fff;
    font-size: 1.55rem;
    font-weight: 700;
    letter-spacing: 0.01em;
    border: 2px solid #184b58;
    box-shadow: 0 10px 24px rgba(24, 75, 88, 0.28);
    transition: transform 140ms ease, box-shadow 140ms ease, filter 140ms ease;
    cursor: pointer;
    }
    button:hover {
      transform: translateY(-1px);
      box-shadow: 0 14px 28px rgba(24, 75, 88, 0.34);
      filter: brightness(1.02);
    }
    button:active {
      transform: translateY(1px) scale(0.99);
      box-shadow: 0 6px 14px rgba(24, 75, 88, 0.28);
    }
    button:focus-visible {
      outline: 3px solid #7ac2d5;
      outline-offset: 3px;
    }
    .wrapper button {
      margin-top: 10px;
      margin-bottom: 14px;
    }
    .stats {
      font-size: 1.3rem;
    }
    .small {
      color: #555;
      font-size: 0.9rem;
    }
    .home-panel {
      margin-bottom: 20px;
    }
    .progress-wrap {
      position: relative;
      width: 130px;
      height: 130px;
      margin: 0 auto 12px;
    }
    .progress-ring {
      transform: rotate(-90deg);
    }
    .ring-bg {
      fill: none;
      stroke: #e7eef1;
      stroke-width: 10;
    }
    .ring-fill {
      fill: none;
      stroke: #226579;
      stroke-width: 10;
      stroke-linecap: round;
      transition: stroke-dashoffset 650ms ease;
    }
    .ring-center {
      position: absolute;
      inset: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      line-height: 1.1;
    }
    #ring_percent {
      font-size: 1.5rem;
      font-weight: 700;
      color: #123a46;
    }
    #ring_numbers {
      color: #4c6168;
      font-size: 0.8rem;
      margin-top: 3px;
    }
    .streak-badge {
      display: inline-block;
      margin: 8px 0 2px;
      background: #edf6f8;
      color: #184b58;
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 0.88rem;
      font-weight: 600;
    }
    .goal-chip {
      display: none;
      margin: 0 4px 6px;
      padding: 6px 10px;
      border-radius: 999px;
      font-size: 0.85rem;
      background: #edf6f8;
      color: #184b58;
      opacity: 0;
      transform: translateY(5px) scale(0.96);
      transition: opacity 250ms ease, transform 250ms ease;
    }
    .goal-chip.show {
      display: inline-block;
      opacity: 1;
      transform: translateY(0) scale(1);
    }
    .goal-chip.burst {
      animation: burst 650ms ease-out;
    }
    .milestone-wrap {
      margin: 6px 0 10px;
      max-width: 320px;
      margin-left: auto;
      margin-right: auto;
    }
    .milestone-track {
      width: 100%;
      height: 10px;
      margin: 6px auto 4px;
      background: #e6eef1;
      border-radius: 999px;
      overflow: hidden;
    }
    .milestone-fill {
      width: 0;
      height: 100%;
      background: #226579;
      border-radius: 999px;
      transition: width 500ms ease;
    }
    .chart-box {
      margin-top: 14px;
    }
    .chart-controls {
      display: flex;
      justify-content: center;
      gap: 8px;
      margin: 8px 0 10px;
    }
    .chart-toggle {
      width: auto;
      max-width: none;
      min-width: 96px;
      height: auto;
      margin: 0;
      padding: 8px 12px;
      font-size: 0.9rem;
      font-weight: 600;
      color: #184b58;
      background: #f2f7f8;
      border: 1px solid #c7dbe1;
      border-radius: 999px;
      box-shadow: none;
      cursor: pointer;
      transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
    }
    .chart-toggle:hover {
      transform: none;
      filter: none;
      box-shadow: none;
      background: #e8f1f4;
      border-color: #aac9d3;
    }
    .chart-toggle:active {
      transform: none;
      box-shadow: none;
    }
    .chart-toggle.is-active {
      color: #ffffff;
      background: #226579;
      border-color: #226579;
    }
    .trend-canvas {
      width: 100%;
      max-width: 360px;
      height: 180px;
      display: block;
      margin: 0 auto;
      background: #f8fbfc;
      border: 1px solid #e1ecef;
      border-radius: 12px;
    }
    .chart-axis {
      max-width: 360px;
      margin: 6px auto 0;
      display: flex;
      justify-content: space-between;
      color: #5b7178;
      font-size: 0.78rem;
      line-height: 1;
    }
    .milestone-markers {
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #5b7178;
      font-size: 0.72rem;
      margin-bottom: 3px;
      line-height: 1;
    }
    #milestone_remaining {
      display: inline-block;
      margin-top: 1px;
      color: #184b58;
      font-weight: 600;
    }
    .undo-btn {
      display: inline-block;
      margin-top: 10px;
      padding: 10px 14px;
      min-width: 220px;
      height: auto;
      font-size: 0.95rem;
      font-weight: 600;
      color: #184b58;
      background: #f2f7f8;
      border: 1px solid #c7dbe1;
      border-radius: 10px;
      box-shadow: none;
      transition: background-color 120ms ease, border-color 120ms ease, transform 120ms ease;
    }
    .undo-btn:hover {
      background: #e9f2f5;
      border-color: #aac9d3;
      transform: translateY(-1px);
      box-shadow: none;
      filter: none;
    }
    .undo-btn:active {
      transform: translateY(0);
      box-shadow: none;
    }
    .undo-btn:disabled {
      opacity: 0.7;
      cursor: not-allowed;
      transform: none;
    }
    .pop-in {
      animation: popIn 380ms ease-out;
    }
    @keyframes popIn {
      0% { transform: scale(0.94); }
      65% { transform: scale(1.06); }
      100% { transform: scale(1); }
    }
    @keyframes burst {
      0% { box-shadow: 0 0 0 0 rgba(34, 101, 121, 0.35); }
      100% { box-shadow: 0 0 0 14px rgba(34, 101, 121, 0); }
    }

    /* Startsida: platt, modern CTA och renare layout */
    .start-page {
      background: #f9f8f5;
    }
    .start-wrapper {
      max-width: 560px;
      margin: 18px auto 0;
      padding: 22px 18px 26px;
      background: #ffffff;
      border-radius: 16px;
      box-shadow: 0 6px 18px rgba(16, 49, 58, 0.07);
    }
    .start-wrapper h1 {
      margin-top: 6px;
      margin-bottom: 10px;
      color: #123a46;
    }
    .start-wrapper p {
      margin: 10px 0;
      color: #274e59;
    }
    .start-wrapper .small {
      margin-top: 14px;
    }
    .start-cta {
      min-width: 260px;
      height: 88px;
      background: #226579;
      color: #ffffff;
      border: 2px solid #226579;
      border-radius: 12px;
      box-shadow: none;
      letter-spacing: 0.01em;
      transition: background-color 140ms ease, border-color 140ms ease, transform 140ms ease;
    }
    .start-cta:hover {
      background: #1d5869;
      border-color: #1d5869;
      box-shadow: none;
      filter: none;
      transform: translateY(-1px);
    }
    .start-cta:active {
      transform: translateY(0);
      box-shadow: none;
    }
    .start-cta:focus-visible {
      outline: 3px solid #83c8db;
      outline-offset: 3px;
    }