/* =========================================
       UV.nu – Minimal nordisk utility
       ========================================= */

    :root{
      --bg: #F5F7F9;
      --card: #FFFFFF;
      --border: #E5E7EB;
      --text: #111827;
      --muted: #6B7280;
      --shadow: 0 1px 2px rgba(0,0,0,.05);
      --radius: 12px;

      /* UV-accents (håll färg väldigt återhållsam) */
      --uv-green: #2E7D32;
      --uv-amber: #B45309;
      --uv-red: #B91C1C;
      --uv-purple: #7C3AED;
    }

    body{
      background: var(--bg);
      color: var(--text);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .frame{
      max-width: 920px;
      margin: 28px auto 36px;
      padding: 0 14px;
    }

    .card-clean{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
    }

    .nav-clean{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 14px 18px;
    }

    .brand{
      font-weight: 700;
      letter-spacing: .2px;
      font-size: 20px;
    }

    .tagline{
      color: var(--muted);
      font-size: 14px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 520px;
    }

    .hero-title{
      font-size: 28px;
      font-weight: 600;
      margin: 0;
    }

    .hero-sub{
      color: var(--muted);
      font-size: 13px;
      margin-top: 6px;
    }

    .uv-number{
      font-size: 86px;
      line-height: 1;
      font-weight: 700;
      letter-spacing: -1px;
      margin: 6px 0 6px;
    }

    .uv-level{
      font-size: 22px;
      font-weight: 600;
      margin-bottom: 14px;
    }

    /* UV-bar (diskret) */
    .uv-track{
      position: relative;
      height: 14px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background:
        linear-gradient(90deg,
          rgba(46,125,50,.25) 0%,
          rgba(46,125,50,.25) 18%,
          rgba(180,83,9,.22) 18%,
          rgba(180,83,9,.22) 45%,
          rgba(185,28,28,.20) 45%,
          rgba(185,28,28,.20) 72%,
          rgba(124,58,237,.18) 72%,
          rgba(124,58,237,.18) 100%);
      overflow: hidden;
    }
    .uv-marker{
      position: absolute;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 22px;
      height: 10px;
      border-radius: 999px;
      background: rgba(17,24,39,.55);
      border: 1px solid rgba(255,255,255,.7);
      box-shadow: 0 1px 2px rgba(0,0,0,.12);
    }

    .hero-meta{
      border-top: 1px solid var(--border);
      margin-top: 18px;
      padding-top: 16px;
      color: var(--text);
    }
    .hero-meta .label{
      color: var(--muted);
    }

    .mini-kpi{
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      gap: 10px;
      align-items: center;
    }

    .mini-kpi .value{
      font-size: 34px;
      font-weight: 700;
      letter-spacing: -0.5px;
    }
    .mini-kpi .sub{
      color: var(--muted);
      font-size: 13px;
      margin-top: 2px;
    }

    /* Prognos-graf (svg) */
    .spark-wrap{
      width: 100%;
      height: 120px;
    }
    .spark{
      width: 100%;
      height: 120px;
      display: block;
    }
    .spark-grid{
      stroke: rgba(17,24,39,.08);
      stroke-width: 1;
    }
    .spark-line{
      fill: none;
      stroke: rgba(17,24,39,.55);
      stroke-width: 2.2;
    }
    .spark-dot{
      fill: rgba(234,179,8,.9);
      stroke: rgba(17,24,39,.25);
      stroke-width: 1;
    }
    .spark-fill{
      fill: rgba(234,179,8,.08);
    }
    .tick{
      fill: rgba(17,24,39,.55);
      font-size: 12px;
    }

    /* UV-skala */
    .scale-row{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 0;
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }
    .scale-cell{
      padding: 14px 10px;
      text-align: center;
      font-weight: 600;
      font-size: 14px;
    }
    .scale-caption{
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      margin-top: 8px;
      color: var(--muted);
      font-size: 13px;
      text-align: center;
    }

    .scale-low{ background: rgba(46,125,50,.18); }
    .scale-mod{ background: rgba(46,125,50,.10); }
    .scale-high{ background: rgba(180,83,9,.16); }
    .scale-vhigh{ background: rgba(185,28,28,.14); }
    .scale-ext{ background: rgba(124,58,237,.12); }

    /* Footer */
    footer{
      color: var(--muted);
      font-size: 14px;
      margin-top: 26px;
    }
    footer a{ color: inherit; text-decoration: none; }
    footer a:hover{ text-decoration: underline; }


    /* Rekommendationslista (kort och luftig) */
    .advice-list{
      margin: 6px 0 0 0;
      padding-left: 18px;
      color: rgba(17,24,39,.82);
    }
    .advice-list li{
      margin: 2px 0;
      line-height: 1.35;
    }

    /* Y-axel-etiketter i UV-prognos */
    .spark-ylabel{
      fill: rgba(17,24,39,.55);
      font-size: 11px;
      font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
    }
    .spark-axis{
      stroke: rgba(17,24,39,.12);
      stroke-width: 1;
    }