@import url('https://fonts.googleapis.com/css2?family=Questrial&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ══════════════════════════════════════════════════════════
   DESIGN TOKENS
══════════════════════════════════════════════════════════ */
:root {
  /* Brand colours */
  --navy:    #0A1628;
  --navy-2:  #12233E;
  --navy-3:  #1A3055;
  --blue:    #1855F4;
  --blue-2:  #0F40D0;
  --blue-3:  #EEF2FF;
  --blue-4:  #C7D4FD;

  /* Semantic */
  --green:      #16A34A;
  --green-bg:   #DCFCE7;
  --amber:      #D97706;
  --amber-bg:   #FEF3C7;
  --red:        #DC2626;
  --red-bg:     #FEE2E2;

  /* Surfaces */
  --bg:      #F2F5FA;
  --surface: #FFFFFF;
  --s2:      #F7F9FD;
  --s3:      #EDF1F8;

  /* Borders */
  --line:    #E2E8F4;
  --line2:   #CAD5EC;

  /* Text */
  --text:    #0A1628;
  --muted:   #5B6B85;
  --hint:    #8FA0BB;

  /* Layout */
  --max:  1240px;
  --r:    12px;
  --rl:   18px;
  --rxl:  24px;

  /* Shadows */
  --sh:   0 1px 3px rgba(10,22,40,.05), 0 4px 16px rgba(10,22,40,.06);
  --sh2:  0 2px 8px rgba(10,22,40,.07), 0 16px 48px rgba(10,22,40,.10);

  /* Typography */
  --font-display: 'Questrial', system-ui, sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════════
   RESET & BASE
══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button  { cursor: pointer; }
a       { text-decoration: none; color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
}

.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  color: var(--muted);
  font-size: 14px;
}

/* ══════════════════════════════════════════════════════════
   TOPBAR
══════════════════════════════════════════════════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
}
.topbar-inner {
  max-width: var(--max);
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 24px;
  height: 64px;
}
.logo { height: 38px; width: auto; object-fit: contain; }

.nav { display: flex; align-items: center; gap: 1px; flex: 1; }
.nav-right { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.nav button {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 13px;
  border-radius: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  transition: .15s;
}
.nav button:hover  { background: var(--s3); color: var(--text); }
.nav button.active { background: var(--blue-3); color: var(--navy); }

.nav .nav-cta,
.nav-right .nav-cta {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  border-radius: 10px;
  border-color: var(--navy);
}
.nav .nav-cta:hover,
.nav-right .nav-cta:hover,
.nav .nav-cta.active,
.nav-right .nav-cta.active {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue);
}

.nav-user {
  margin-left: 6px;
  border: 0;
  background: var(--s3);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 9px;
  font-weight: 600;
  font-size: 12.5px;
  transition: .15s;
}
.nav-user:hover { background: var(--red-bg); color: var(--red); }

/* ── Testflödes-flikar ── */
.to-tabs {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 5px;
  gap: 4px;
  margin-bottom: 18px;
  box-shadow: var(--sh);
  width: fit-content;
}
.to-tab {
  padding: 9px 20px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.to-tab:hover { background: var(--s3); color: var(--text); }
.to-tab.active {
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(10,22,40,.18);
}
.to-badge {
  font-size: 10.5px;
  font-weight: 700;
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}
.to-tab.active .to-badge { background: rgba(255,255,255,.25); }
.nav-home-btn {
  border: 0;
  background: var(--s3);
  color: var(--muted);
  font-size: 20px;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: .15s;
  flex-shrink: 0;
  margin-right: 4px;
  line-height: 1;
}
.nav-home-btn:hover { background: var(--blue-3); color: var(--navy); }

/* Admin-knapp */
.nav-admin-btn {
  border: 1.5px solid var(--line2);
  background: var(--s2);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: .15s;
  display: flex;
  align-items: center;
  gap: 5px;
}
.nav-admin-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

.nav-register {
  margin-left: 6px;
  border: 1.5px solid var(--blue);
  background: transparent;
  color: var(--blue);
  padding: 6px 14px;
  border-radius: 9px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  transition: .15s;
}
.nav-register:hover {
  background: var(--blue);
  color: #fff;
}

/* ══════════════════════════════════════════════════════════
   PAGE WRAPPER
══════════════════════════════════════════════════════════ */
.page { max-width: var(--max); margin: auto; padding: 28px 24px; }

/* ══════════════════════════════════════════════════════════
   EYEBROW / LABELS
══════════════════════════════════════════════════════════ */
.eyebrow {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════
   BUTTONS
══════════════════════════════════════════════════════════ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--text);
  border-radius: 10px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13px;
  transition: .15s;
  white-space: nowrap;
}
.btn:hover { border-color: var(--line2); background: var(--s2); box-shadow: var(--sh); }

.btn.primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn.primary:hover { background: var(--blue); border-color: var(--blue); }

.btn.blue-btn { background: var(--blue); border-color: var(--blue); color: #fff; }
.btn.blue-btn:hover { background: var(--blue-2); border-color: var(--blue-2); }

.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--s3); }

.btn.light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.25); }
.btn.light:hover { background: rgba(255,255,255,.22); }

.btn.danger { background: var(--red-bg); border-color: #fca5a5; color: var(--red); }
.btn.danger:hover { background: #fee2e2; }

.btn.sm  { padding: 5px 12px; font-size: 12px; border-radius: 8px; }
.btn.xs  { padding: 3px 9px; font-size: 11.5px; border-radius: 7px; }

.text-link { background: none; border: 0; padding: 0; color: var(--blue); font-weight: 600; font-size: inherit; }

/* ══════════════════════════════════════════════════════════
   HERO BUTTONS (home page)
══════════════════════════════════════════════════════════ */
.cp-primary {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 700;
  padding: 11px 20px;
  font-size: 14px;
}
.cp-primary:hover { background: var(--blue-2); border-color: var(--blue-2); transform: translateY(-1px); }

.cp-secondary {
  background: rgba(255,255,255,.1);
  border-color: rgba(255,255,255,.28);
  color: #fff;
  font-weight: 600;
  padding: 11px 20px;
  font-size: 14px;
}
.cp-secondary:hover { background: rgba(255,255,255,.2); }

.cp-secondary.light {
  background: var(--surface);
  border-color: var(--line2);
  color: var(--navy);
}
.cp-secondary.light:hover { background: var(--blue-3); border-color: var(--blue-4); }

/* ══════════════════════════════════════════════════════════
   CARDS
══════════════════════════════════════════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  box-shadow: var(--sh);
}
.soft-card {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 16px;
}

/* ══════════════════════════════════════════════════════════
   PILLS / BADGES
══════════════════════════════════════════════════════════ */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;
  background: var(--blue-3);
  color: var(--navy);
  padding: 3px 10px;
  font-size: 11.5px;
  font-weight: 700;
}
.pill.good { background: var(--green-bg); color: #15803d; }
.pill.warn { background: var(--amber-bg); color: #92400e; }
.pill.bad  { background: var(--red-bg); color: #991b1b; }
.pill.gray { background: var(--s3); color: var(--muted); border: 1px solid var(--line); }
.pill.dark { background: var(--navy); color: #fff; }

/* ══════════════════════════════════════════════════════════
   SCORE BAR
══════════════════════════════════════════════════════════ */
.bar { height: 7px; background: var(--line); border-radius: 999px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #ef4444 0%, #f59e0b 30%, #22c55e 65%, #1855F4 100%); transition: width .5s ease; }

/* ══════════════════════════════════════════════════════════
   FORMS
══════════════════════════════════════════════════════════ */
.input, select, textarea {
  width: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 8px 12px;
  outline: none;
  color: var(--text);
  transition: .15s;
  font-size: 13.5px;
}
.input:focus, select:focus, textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(24,85,244,.10);
}
.input-sm { padding: 5px 9px; font-size: 13px; border-radius: 7px; }

label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.field { display: grid; gap: 6px; }
.row   { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.muted { color: var(--muted); }

/* ══════════════════════════════════════════════════════════
   TABLES (generic)
══════════════════════════════════════════════════════════ */
.table-wrap {
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: var(--rl);
  background: #fff;
}
table { width: 100%; border-collapse: separate; border-spacing: 0; }
th, td { padding: 10px 13px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
th {
  background: var(--s2);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 2;
  white-space: nowrap;
}
tr:last-child td { border-bottom: 0; }
tr:hover td { background: var(--s2); }
.score-mini { font-size: 11.5px; color: var(--muted); font-weight: 600; display: block; margin-top: 3px; }

/* ══════════════════════════════════════════════════════════
   TOAST
══════════════════════════════════════════════════════════ */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  padding: 11px 20px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  z-index: 9999;
  box-shadow: var(--sh2);
  animation: toast-in .2s ease;
}
@keyframes toast-in {
  from { opacity:0; transform: translateX(-50%) translateY(8px); }
  to   { opacity:1; transform: translateX(-50%) translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   FOOTER
══════════════════════════════════════════════════════════ */
.footer {
  border-top: 1px solid var(--line);
  background: var(--surface);
  margin-top: 60px;
}
.footer-inner {
  max-width: var(--max);
  margin: auto;
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer-logo { height: 28px; width: auto; opacity: .7; }
.footer-links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
.footer-links a {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
  transition: color .15s;
}
.footer-links a:hover { color: var(--navy); }
.footer-copy { font-size: 12px; color: var(--hint); }

/* ══════════════════════════════════════════════════════════
   HOME PAGE — säljande landningssida
══════════════════════════════════════════════════════════ */
.home-main { display: flex; flex-direction: column; }

/* Logo-knapp */
.logo-btn { background: none; border: 0; padding: 0; cursor: pointer; display: flex; align-items: center; }

/* ── Hero ── */
.home-hero-full {
  position: relative;
  height: calc(100vh - 64px);
  min-height: 560px;
  max-height: 860px;
  overflow: hidden;
}
.home-hero-bg { position: absolute; inset: 0; }
.home-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; }
.home-hero-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(115deg, rgba(5,10,20,.88) 0%, rgba(10,22,40,.72) 55%, rgba(10,22,40,.28) 100%);
  pointer-events: none;
}
.home-hero-content {
  position: relative; z-index: 2;
  max-width: 700px;
  padding: 0 0 0 72px;
  height: 100%;
  display: flex; flex-direction: column; justify-content: center;
}
.home-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #a9c8ff;
  letter-spacing: .04em;
  margin-bottom: 22px;
  width: fit-content;
}
.home-hero-h1 {
  font-family: var(--font-display);
  font-size: 76px;
  font-weight: 900;
  line-height: .9;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 22px;
}
.home-hero-p {
  font-size: 18px;
  line-height: 1.65;
  color: rgba(255,255,255,.75);
  max-width: 560px;
  margin-bottom: 32px;
}
.home-hero-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.home-cta-btn {
  background: var(--blue); border-color: var(--blue); color: #fff;
  font-weight: 700; font-size: 15px; padding: 13px 28px; border-radius: 12px;
}
.home-cta-btn:hover { background: #0f40d0; border-color: #0f40d0; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(24,85,244,.35); }
.home-ghost-btn {
  background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: #fff;
  font-weight: 600; font-size: 15px; padding: 13px 24px; border-radius: 12px;
}
.home-ghost-btn:hover { background: rgba(255,255,255,.18); }
.home-ghost-light {
  background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff;
}
.home-ghost-light:hover { background: rgba(255,255,255,.2); }
.home-hero-trust { display: flex; gap: 20px; flex-wrap: wrap; }
.home-hero-trust span { font-size: 13px; color: rgba(255,255,255,.6); font-weight: 500; }

/* ── Sport-ticker ── */
.home-sports-bar {
  background: var(--navy);
  display: flex; align-items: center; gap: 0;
  padding: 0 24px;
  overflow-x: auto;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.home-sports-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.4); white-space: nowrap; padding-right: 16px; margin-right: 4px;
  border-right: 1px solid rgba(255,255,255,.1);
}
.home-sport-chip {
  display: inline-flex; padding: 12px 16px; font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.7); white-space: nowrap; border-right: 1px solid rgba(255,255,255,.07);
  transition: color .15s;
}
.home-sport-chip:hover { color: #fff; }
.home-sport-more { color: var(--blue) !important; font-weight: 700; }

/* ── Gemensam sektion-wrapper ── */
.home-value, .home-how, .home-targets, .home-pricing, .home-final-cta {
  padding: 80px 24px;
}
.home-value { background: var(--surface); }
.home-how   { background: var(--navy); }
.home-targets { background: var(--bg); }
.home-pricing { background: var(--surface); }
.home-final-cta { background: linear-gradient(135deg, var(--navy) 0%, #0d2060 100%); }

.home-value-inner, .home-how-inner, .home-targets-inner, .home-pricing-inner, .home-final-inner {
  max-width: 1200px; margin: 0 auto;
}
.home-section-h2 {
  font-family: var(--font-display);
  font-size: 52px; font-weight: 900; text-transform: uppercase;
  color: var(--navy); line-height: .95; margin: 10px 0 0;
}

/* ── Värdeproposition ── */
.home-value-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center;
}
.home-value-p { font-size: 16px; line-height: 1.75; color: var(--muted); margin: 16px 0 0; }
.home-check-list { margin: 20px 0 0; display: grid; gap: 10px; list-style: none; }
.home-check-list li {
  font-size: 14.5px; color: var(--text); padding-left: 22px; position: relative; line-height: 1.5;
}
.home-check-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.home-value-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.home-val-card {
  background: var(--s2); border: 1px solid var(--line); border-radius: 18px;
  padding: 24px; box-shadow: var(--sh);
}
.home-val-num {
  font-family: var(--font-display); font-size: 48px; font-weight: 900; color: var(--blue);
  line-height: 1; margin-bottom: 6px;
}
.home-val-label { font-size: 14px; font-weight: 700; color: var(--navy); margin-bottom: 4px; }
.home-val-sub { font-size: 12.5px; color: var(--muted); line-height: 1.5; }

/* ── Hur det fungerar ── */
.home-how-hdr { text-align: center; margin-bottom: 48px; }
.home-how-hdr .home-section-h2 { color: #fff; }
.home-how-steps {
  display: flex; align-items: flex-start; gap: 0; justify-content: center; flex-wrap: wrap;
}
.home-step {
  flex: 1; min-width: 180px; max-width: 240px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px; padding: 28px 24px; text-align: center;
}
.home-step-num {
  width: 44px; height: 44px; border-radius: 12px; background: var(--blue);
  color: #fff; font-family: var(--font-display); font-size: 24px; font-weight: 900;
  display: flex; align-items: center; justify-content: center; margin: 0 auto 16px;
}
.home-step h3 { font-size: 17px; color: #fff; font-family: var(--font-display); text-transform: uppercase; margin-bottom: 8px; }
.home-step p  { font-size: 13.5px; color: #8fa5c8; line-height: 1.6; }
.home-step-arrow {
  align-self: center; font-size: 24px; color: rgba(255,255,255,.2);
  padding: 0 8px; flex-shrink: 0;
}

/* ── Målgrupper ── */
.home-targets-hdr { text-align: center; margin-bottom: 40px; }
.home-target-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.home-target-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 20px; padding: 30px 24px; box-shadow: var(--sh);
  transition: .18s;
}
.home-target-card:hover { transform: translateY(-3px); box-shadow: var(--sh2); }
.home-target-icon { font-size: 36px; margin-bottom: 14px; display: block; line-height: 1; }
.home-target-card h3 { font-size: 20px; font-family: var(--font-display); text-transform: uppercase; color: var(--navy); margin-bottom: 10px; }
.home-target-card p  { font-size: 13.5px; line-height: 1.65; color: var(--muted); }

/* ── Priser ── */
.home-pricing-inner .home-targets-hdr .home-section-h2 { color: var(--navy); }
.home-price-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; max-width: 740px; margin: 0 auto 24px; }
.home-price-card {
  background: var(--s2); border: 2px solid var(--line);
  border-radius: 24px; padding: 36px 32px; position: relative;
}
.home-price-featured {
  background: linear-gradient(135deg, #07101e 0%, #0a1628 60%, #0e2060 140%);
  border-color: var(--blue);
}
.home-price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--blue); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: .1em; text-transform: uppercase; border-radius: 999px; padding: 4px 14px;
  white-space: nowrap;
}
.home-price-eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.home-price-featured .home-price-eyebrow { color: #7ba6ff; }
.home-price-amount { font-family: var(--font-display); font-size: 52px; font-weight: 900; color: var(--navy); line-height: 1; margin-bottom: 4px; }
.home-price-featured .home-price-amount { color: #fff; }
.home-price-per { font-size: 13px; color: var(--muted); margin-bottom: 22px; }
.home-price-featured .home-price-per { color: #8fa5c8; }
.home-price-list { list-style: none; display: grid; gap: 8px; }
.home-price-list li { font-size: 13.5px; color: var(--text); padding-left: 20px; position: relative; }
.home-price-list li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }
.home-price-featured .home-price-list li { color: #c8d8f0; }
.home-price-featured .home-price-list li::before { color: #7ba6ff; }
.home-pricing-note { text-align: center; font-size: 14px; color: var(--muted); margin-top: 20px; }

/* ── Avslutande CTA ── */
.home-final-inner { text-align: center; max-width: 600px; }
.home-final-inner h2 { font-family: var(--font-display); font-size: 52px; font-weight: 900; color: #fff; text-transform: uppercase; line-height: .95; margin-bottom: 16px; }
.home-final-inner p  { font-size: 17px; color: rgba(255,255,255,.7); margin-bottom: 32px; line-height: 1.6; }

/* ── Responsiv ── */
@media (max-width: 1100px) {
  .home-target-grid { grid-template-columns: 1fr 1fr; }
  .home-value-inner { grid-template-columns: 1fr; gap: 40px; }
  .home-value-cards { grid-template-columns: repeat(4, 1fr); }
  .home-hero-h1 { font-size: 58px; }
}
@media (max-width: 760px) {
  .home-hero-content { padding: 0 20px; }
  .home-hero-h1 { font-size: 42px; }
  .home-hero-p { font-size: 16px; }
  .home-hero-full { max-height: 640px; }
  .home-value, .home-how, .home-targets, .home-pricing, .home-final-cta { padding: 52px 20px; }
  .home-section-h2 { font-size: 38px; }
  .home-how-steps { flex-direction: column; align-items: stretch; }
  .home-step { max-width: none; min-width: 0; }
  .home-step-arrow { display: none; }
  .home-target-grid { grid-template-columns: 1fr; }
  .home-price-grid { grid-template-columns: 1fr; max-width: 440px; }
  .home-value-cards { grid-template-columns: 1fr 1fr; }
  .home-final-inner h2 { font-size: 38px; }
}

/* ── Intro section ── */
.cp-intro.cp-intro-modern {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px 24px;
  display: grid;
  grid-template-columns: minmax(0,1fr) 340px;
  gap: 16px;
  align-items: stretch;
}

.cp-intro-main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 24px;
  padding: 36px;
  box-shadow: var(--sh);
}
.cp-intro-main .eyebrow { margin-bottom: 8px; display: block; }
.cp-intro-main h2 {
  font-size: 42px;
  color: var(--navy);
  margin: 0 0 14px;
  line-height: .96;
  text-transform: uppercase;
}
.cp-intro-main p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
}

/* Cycle panel */
.cp-cycle-panel {
  background: var(--navy);
  border-radius: 24px;
  padding: 28px;
  box-shadow: 0 14px 36px rgba(10,22,40,.15);
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100%;
}
.cp-cycle-top span {
  display: block;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6b9aff;
  margin-bottom: 8px;
}
.cp-cycle-top strong {
  display: block;
  font-family: var(--font-display);
  font-size: 46px;
  font-weight: 900;
  line-height: .9;
  color: #fff;
  text-transform: uppercase;
}
.cp-cycle-line {
  height: 4px;
  background: rgba(255,255,255,.1);
  border-radius: 999px;
  margin: 22px 0 14px;
  overflow: hidden;
}
.cp-cycle-line i {
  display: block;
  width: 78%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--blue), #89b4ff);
}
.cp-cycle-steps { display: flex; justify-content: space-between; gap: 8px; }
.cp-cycle-steps span {
  flex: 1;
  text-align: center;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  padding: 9px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #c8d8f0;
}

/* ── Benefits ── */
.cp-benefits {
  max-width: var(--max);
  margin: 0 auto;
  padding: 4px 24px 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.cp-benefits article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 30px;
  box-shadow: var(--sh);
  position: relative;
  overflow: hidden;
}
.cp-benefits article::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--blue), #89b4ff);
}
.cp-benefits span {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--blue);
  display: block;
  margin-bottom: 14px;
}
.cp-benefits h3 {
  font-size: 26px;
  color: var(--navy);
  margin-bottom: 8px;
  text-transform: uppercase;
}
.cp-benefits p { font-size: 13.5px; line-height: 1.65; color: var(--muted); }

/* ── Flow ── */
.cp-flow {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6px 24px 20px;
}
.cp-section-head { margin-bottom: 16px; }
.cp-section-head h2 {
  font-size: 42px;
  color: var(--navy);
  margin: 8px 0 0;
  text-transform: uppercase;
}
.cp-flow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  background: var(--navy);
  border-radius: 24px;
  padding: 16px;
  box-shadow: 0 16px 40px rgba(10,22,40,.14);
}
.cp-flow-grid div {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  padding: 22px;
  min-height: 150px;
}
.cp-flow-grid b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--blue);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 14px;
}
.cp-flow-grid strong { display: block; font-size: 15px; color: #fff; margin-bottom: 6px; font-family: var(--font-display); text-transform: uppercase; }
.cp-flow-grid p { font-size: 13px; color: #8fa5c8; line-height: 1.6; }

/* ── Public pricing (home) ── */
.cp-public-pricing {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6px 24px 20px;
}
.cp-public-price-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.cp-public-price-grid article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
  box-shadow: var(--sh);
}
.cp-public-price-grid article.featured {
  background: linear-gradient(135deg, #07101e 0%, #0a1628 60%, #102878 140%);
  border-color: var(--navy);
  color: #fff;
}
.cp-public-price-grid span {
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.cp-public-price-grid article.featured span { color: #7ba6ff; }
.cp-public-price-grid h3 { font-size: 32px; color: var(--navy); margin-bottom: 6px; text-transform: uppercase; }
.cp-public-price-grid article.featured h3 { color: #fff; }
.cp-public-price-grid strong {
  display: block;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 10px;
}
.cp-public-price-grid article.featured strong { color: #fff; }
.cp-public-price-grid p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.cp-public-price-grid article.featured p { color: #b0c4de; }

/* ── CTA ── */
.cp-cta {
  max-width: var(--max);
  margin: 0 auto;
  padding: 6px 24px 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.cp-cta > div {
  background: var(--navy);
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 14px 40px rgba(10,22,40,.15);
  flex: 1;
}
.cp-cta h2 { font-size: 42px; color: #fff; margin: 8px 0 12px; text-transform: uppercase; }
.cp-cta p { font-size: 15px; color: #8fa5c8; }

/* ══════════════════════════════════════════════════════════
   INNER PAGE SHELL (why / how / pricing / about / contact)
══════════════════════════════════════════════════════════ */
.page-head { margin-bottom: 28px; }
.page-head .eyebrow { margin-bottom: 6px; display: block; }
.page-head h1 { font-size: 52px; color: var(--navy); margin-bottom: 8px; text-transform: uppercase; }
.page-head p { font-size: 15px; color: var(--muted); }

/* Info pages */
.info-page-grid, .how-page { display: grid; gap: 18px; }
.info-hero-card, .info-wide-card, .how-flow-card, .how-testbank-card { padding: 36px; }
.info-hero-card h2, .info-wide-card h2, .how-flow-card h2, .how-testbank-card h2 {
  font-size: 42px;
  color: var(--navy);
  margin: 8px 0 14px;
  text-transform: uppercase;
}
.info-hero-card p, .info-wide-card p, .how-testbank-card p {
  font-size: 15px;
  line-height: 1.75;
  color: var(--muted);
  margin-bottom: 14px;
  max-width: 900px;
}
.info-benefit-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.info-benefit-list article { padding: 26px; border-radius: 20px; box-shadow: var(--sh); }
.info-benefit-list b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--blue-3);
  color: var(--blue);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 14px;
}
.info-benefit-list h3, .how-split h3 { font-size: 24px; color: var(--navy); margin-bottom: 8px; text-transform: uppercase; }
.info-benefit-list p, .how-split p, .how-steps p { font-size: 13.5px; line-height: 1.65; color: var(--muted); }

.how-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 18px; }
.how-steps article { background: var(--s2); border: 1px solid var(--line); border-radius: 16px; padding: 22px; }
.how-steps b {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  margin-bottom: 14px;
}
.how-steps strong { display: block; font-size: 15px; color: var(--navy); margin-bottom: 6px; font-family: var(--font-display); text-transform: uppercase; }
.how-split { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.how-split article { padding: 28px; border-radius: 20px; }
.how-chip-row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.how-chip-row span {
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--blue-3);
  border: 1px solid var(--blue-4);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--navy);
}

/* ══════════════════════════════════════════════════════════
   TESTMANUALER
══════════════════════════════════════════════════════════ */
.manual-category-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.manual-cat { padding: 26px 28px; }
.manual-cat-hdr {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--line);
}
.manual-cat-icon { font-size: 22px; line-height: 1; }
.manual-cat h3 {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
}
.manual-list {
  list-style: none;
  display: grid;
  gap: 10px;
}
.manual-list li {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.55;
  padding-left: 14px;
  position: relative;
}
.manual-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--blue);
  font-weight: 700;
}
.manual-list li strong { color: var(--text); font-weight: 700; }

@media (max-width: 900px) {
  .manual-category-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .manual-cat { padding: 20px; }
}

/* Pricing page */
.public-price-page { display: grid; gap: 18px; }
.public-price-hero { padding: 36px; }
.public-price-hero h2 { font-size: 42px; color: var(--navy); margin: 8px 0 12px; text-transform: uppercase; }
.public-price-hero p { font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 780px; }
.public-price-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 16px; }
.public-price-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
  box-shadow: var(--sh);
}
.public-price-card.featured {
  background: linear-gradient(135deg, #07101e 0%, #0a1628 60%, #102878 140%);
  border-color: var(--navy);
  color: #fff;
}
.public-price-card span {
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue);
  margin-bottom: 10px;
}
.public-price-card.featured span { color: #7ba6ff; }
.public-price-card h3 { font-size: 32px; color: var(--navy); margin-bottom: 6px; text-transform: uppercase; }
.public-price-card.featured h3 { color: #fff; }
.public-price-card strong {
  display: block;
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 1;
  color: var(--blue);
  margin-bottom: 12px;
}
.public-price-card.featured strong { color: #fff; }
.public-price-card p, .public-price-note p { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.public-price-card.featured p { color: #b0c4de; }
.public-price-note {
  padding: 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.public-price-note h3 { font-size: 28px; color: var(--navy); margin-bottom: 8px; text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════
   ACCESS / LOGIN PAGE
══════════════════════════════════════════════════════════ */
.access-page {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
}
.access-card {
  width: 100%;
  max-width: 440px;
  padding: 40px;
}
.access-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 22px;
}
.access-brand img { height: 34px; width: auto; }
.access-card h1 { font-size: 32px; color: var(--navy); margin-bottom: 8px; text-transform: uppercase; }
.access-card p { font-size: 14px; color: var(--muted); margin-bottom: 22px; line-height: 1.65; }
.access-form { display: grid; gap: 14px; }

.access-switch {
  margin-top: 18px;
  font-size: 13.5px;
  color: var(--muted);
  text-align: center;
}

.access-divider {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 4px 0 2px;
}
.access-hint {
  font-size: 12.5px;
  color: var(--muted);
  margin-bottom: 4px !important;
}

/* ══════════════════════════════════════════════════════════
   REGISTRERINGSSIDA — tvåkolumn onboarding
══════════════════════════════════════════════════════════ */
.reg-page {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: calc(100vh - 64px);
}

/* Vänster — säljpanel */
.reg-left {
  background: linear-gradient(155deg, #07101e 0%, #0a1628 55%, #0d2060 120%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 52px;
}
.reg-left-inner { max-width: 440px; }
.reg-logo { height: 36px; width: auto; margin-bottom: 40px; filter: brightness(0) invert(1); opacity: .9; }
.reg-headline {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  color: #fff;
  line-height: .95;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.reg-subhead { font-size: 16px; color: #8fa5c8; line-height: 1.65; margin-bottom: 36px; }
.reg-perks { list-style: none; display: grid; gap: 18px; margin-bottom: 40px; }
.reg-perks li { display: flex; align-items: flex-start; gap: 14px; }
.reg-perk-icon {
  width: 26px; height: 26px; border-radius: 8px;
  background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700; flex-shrink: 0; margin-top: 1px;
}
.reg-perks strong { display: block; font-size: 14px; color: #fff; font-weight: 700; margin-bottom: 2px; }
.reg-perks span   { display: block; font-size: 13px; color: #6a87aa; }
.reg-quote {
  border-left: 3px solid var(--blue);
  padding-left: 16px;
  font-size: 17px;
  font-style: italic;
  color: rgba(255,255,255,.5);
}

/* Höger — formulär */
.reg-right {
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 52px;
}
.reg-form-wrap { width: 100%; max-width: 440px; }
.reg-form-hdr {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
}
.reg-form-hdr h2 { font-size: 28px; color: var(--navy); text-transform: uppercase; font-family: var(--font-display); font-weight: 900; }
.reg-form-hdr p  { font-size: 13.5px; color: var(--muted); }
.reg-form { display: grid; gap: 14px; }
.reg-row  { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.reg-divider {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--hint);
  margin: 2px 0;
}
.reg-divider::before,.reg-divider::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.reg-submit {
  background: var(--navy); border-color: var(--navy); color: #fff;
  font-weight: 700; font-size: 15px; padding: 13px;
  border-radius: 12px; width: 100%; margin-top: 4px;
}
.reg-submit:hover { background: var(--blue); border-color: var(--blue); }
.reg-terms { font-size: 11.5px; color: var(--hint); text-align: center; line-height: 1.5; margin-top: 4px; }

@media (max-width: 860px) {
  .reg-page { grid-template-columns: 1fr; }
  .reg-left { padding: 40px 28px; }
  .reg-right { padding: 36px 24px; }
  .reg-headline { font-size: 28px; }
  .reg-row { grid-template-columns: 1fr; }
}
.forgot-question-box {
  background: var(--blue-3);
  border: 1px solid var(--blue-4);
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}
.forgot-no-q {
  text-align: center;
  padding: 20px 0 10px;
}
.forgot-icon { font-size: 40px; margin-bottom: 12px; }
.forgot-no-q p { font-size: 14px; color: var(--muted); line-height: 1.6; }

.recovery-box {
  margin-top: 18px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--muted);
}
.recovery-box summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.recovery-box form { display: grid; gap: 12px; margin-top: 12px; }
.recovery-box p { margin-bottom: 8px; }

/* ══════════════════════════════════════════════════════════
   PROTOKOLL — kompakt toolbar + scrollbar tabell
══════════════════════════════════════════════════════════ */
.proto-toolbar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px 16px;
  margin-bottom: 10px;
  box-shadow: var(--sh);
}
.proto-toolbar-fields {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

/* Protocol table wrapper */
.pt-wrap {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  overflow: hidden;
}
.pt-scroll { overflow-x: auto; max-height: calc(100vh - 280px); overflow-y: auto; }
.pt-table  { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 500px; }

/* Header */
.pt-table thead th {
  background: var(--navy);
  color: rgba(255,255,255,.8);
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 9px 8px;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  z-index: 3;
  vertical-align: bottom;
}
.pt-num     { width: 32px; text-align: center; }
.pt-name    { min-width: 150px; text-align: left; }
.pt-meta    { width: 58px; text-align: center; }
.pt-test    { min-width: 90px; max-width: 120px; text-align: center; }
.pt-avg-hdr { width: 74px; background: #0a1e40 !important; text-align: center; }
.pt-del-hdr { width: 32px; background: #0a1e40 !important; }
.pt-test-name { display: block; font-size: 10px; font-weight: 700; }
.pt-test-unit { display: block; font-size: 8.5px; font-weight: 400; opacity: .5; text-transform: none; letter-spacing: 0; margin-top: 1px; }

/* Sticky columns */
.pt-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--s2);
  border-right: 2px solid var(--line2);
}
thead .pt-sticky { background: #07101e !important; color: #fff !important; z-index: 5; }

/* Rows */
.pt-table td {
  padding: 5px 6px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: middle;
  background: var(--surface);
}
.pt-row.pt-named td.pt-sticky { background: #f0f7ff; }
.pt-add-row td { background: var(--s2) !important; padding: 8px 10px; border-top: 2px solid var(--line2); }

/* Row number */
.pt-num-cell { text-align: center; color: var(--hint); font-size: 11px; width: 32px; }

/* Name input */
.pt-name-input {
  width: 100%;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 13px;
  font-weight: 600;
  padding: 3px 4px;
  color: var(--text);
  font-family: var(--font-body);
}
.pt-name-input:focus { background: var(--blue-3); border-radius: 5px; }

/* Meta (age/weight) inputs */
.pt-meta-cell { text-align: center; }
.pt-meta-input {
  width: 52px;
  border: 0;
  background: transparent;
  outline: none;
  font-size: 12.5px;
  text-align: center;
  padding: 3px 2px;
  color: var(--muted);
  font-family: var(--font-body);
}
.pt-meta-input:focus { background: var(--blue-3); border-radius: 5px; }

/* Result cell */
.pt-res-cell { text-align: center; padding: 4px 5px !important; }
.pt-cooper   { background: #f5f8ff !important; }
.pt-res-inner { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.pt-res-input {
  width: 76px;
  border: 1.5px solid var(--line);
  border-radius: 7px;
  padding: 5px 6px;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  outline: none;
  background: var(--s2);
  color: var(--text);
  transition: .12s;
  font-family: var(--font-body);
}
.pt-res-input:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(24,85,244,.12); }
.pt-res-filled { border-color: #bbf7d0; background: #f0fdf4; }
.pt-vo2  { font-size: 9px; color: var(--blue); font-weight: 600; }
.pt-mile-hint { font-size: 9px; color: var(--amber, #d97706); font-weight: 600; line-height: 1.1; }
.pt-score { font-family: var(--font-display); font-size: 13px; font-weight: 900; line-height: 1.1; display:flex; align-items:baseline; justify-content:center; gap:3px; margin-top:4px; white-space:nowrap; }
.pt-score small { font-family: var(--font-body); font-size: 9px; font-weight: 800; letter-spacing:.04em; text-transform:uppercase; opacity:.75; }
.pt-score em { font-family: var(--font-body); font-style:normal; font-size:10px; font-weight:800; opacity:.75; }
.pt-mini-bar { width: 56px; height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; }
.pt-mini-bar div { height: 100%; border-radius: 999px; opacity: .75; }

/* Average cell */
.pt-avg-cell { text-align: center; background: #eef2ff !important; padding: 6px 8px !important; }
.pt-avg-num  { font-family: var(--font-display); font-size: 22px; font-weight: 900; color: var(--blue-2); display: block; line-height: 1; }
.pt-avg-bar  { width: 52px; height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 4px auto 0; }
.pt-avg-fill { height: 100%; background: linear-gradient(90deg,#ef4444,#f59e0b 40%,#22c55e 70%,#1855F4); border-radius: 999px; }
.pt-avg-empty { color: var(--hint); font-size: 14px; }

/* Delete button */
.pt-del-cell { text-align: center; }
.pt-del-btn  { border: 0; background: none; color: var(--hint); font-size: 12px; cursor: pointer; padding: 4px 6px; border-radius: 5px; }
.pt-del-btn:hover { background: var(--red-bg); color: var(--red); }

/* ══════════════════════════════════════════════════════════
   RESULTAT — enkel en-rads header
══════════════════════════════════════════════════════════ */
.rt-wrap  { background: var(--surface); border: 1px solid var(--line); border-radius: var(--rl); box-shadow: var(--sh); overflow: hidden; margin-bottom: 10px; }
.rt-scroll { overflow-x: auto; max-height: calc(100vh - 280px); overflow-y: auto; }
.rt-table { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 500px; }

.rt-table thead th {
  background: var(--navy);
  color: rgba(255,255,255,.8);
  font-family: var(--font-body);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  padding: 10px 8px;
  white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.07);
  position: sticky;
  top: 0;
  z-index: 3;
  vertical-align: bottom;
}
.rt-name     { min-width: 140px; text-align: left; }
.rt-age      { width: 52px; text-align: center; }
.rt-test-hdr { min-width: 80px; text-align: center; }
.rt-test-hdr span { display: block; font-size: 10px; }
.rt-test-hdr small { display: block; font-size: 8px; font-weight: 400; opacity: .5; text-transform: none; letter-spacing: 0; }
.rt-total-hdr { width: 64px; background: #0a1e40 !important; text-align: center; }
.rt-area-hdr  { min-width: 72px; background: var(--navy-3) !important; text-align: center; }
.rt-grade-hdr { width: 90px; background: var(--navy-2) !important; text-align: center; }
.rt-print-hdr { width: 52px; background: var(--navy-2) !important; }

.rt-sticky {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--s2);
  border-right: 2px solid var(--line2);
}
thead .rt-sticky { background: #07101e !important; z-index: 5; }

.rt-table td {
  padding: 8px 8px;
  border-bottom: 1px solid var(--line);
  border-right: 1px solid var(--line);
  vertical-align: middle;
  background: var(--surface);
}
.rt-row:hover td { background: var(--s2); }
.rt-age-cell { text-align: center; color: var(--muted); font-size: 12.5px; }
.rt-score-cell { text-align: center; padding: 6px 8px !important; }
.rt-score    { font-family: var(--font-display); font-size: 19px; font-weight: 900; display: block; line-height: 1; }
.rt-empty    { color: var(--hint) !important; font-size: 14px !important; }
.rt-mini-bar { height: 3px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 3px auto 0; width: 44px; }
.rt-mini-bar div { height: 100%; border-radius: 999px; }
.rt-total-cell { background: #eef2ff !important; text-align: center; }
.rt-total    { font-family: var(--font-display); font-size: 24px; font-weight: 900; color: var(--blue-2); display: block; line-height: 1; }
.rt-area-cell { background: var(--s2) !important; text-align: center; font-size: 14px; }
.rt-grade-cell { background: var(--s2) !important; text-align: center; }
.rt-print-cell { text-align: center; background: var(--s2) !important; }

/* ══════════════════════════════════════════════════════════
   INDIVIDUELL PROFIL
══════════════════════════════════════════════════════════ */
.ip-layout {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 14px;
  align-items: start;
}

/* Sidebar */
.ip-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  overflow: hidden;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
}
.ip-sidebar-hdr {
  padding: 12px 14px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--s2);
}
.ip-person-btn {
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 10px 14px;
  cursor: pointer;
  transition: .13s;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 1px;
}
.ip-person-btn:hover { background: var(--blue-3); }
.ip-active { background: var(--navy) !important; }
.ip-person-name { font-size: 13px; font-weight: 700; color: var(--text); grid-column: 1; }
.ip-active .ip-person-name { color: #fff; }
.ip-person-meta { font-size: 10.5px; color: var(--hint); grid-column: 1; }
.ip-active .ip-person-meta { color: rgba(255,255,255,.5); }
.ip-person-score { font-family: var(--font-display); font-size: 24px; font-weight: 900; grid-column: 2; grid-row: 1 / span 2; align-self: center; line-height: 1; }

/* Main */
.ip-main {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  overflow: hidden;
}

/* Header strip */
.ip-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--s2);
}
.ip-name { font-size: 27px; color: var(--navy); margin: 4px 0 6px; text-transform: uppercase; line-height: 1; }
.ip-meta-row { display: flex; gap: 14px; flex-wrap: wrap; }
.ip-meta-row span { font-size: 12px; color: var(--muted); font-weight: 500; }
.ip-meta-row span::before { content: '·'; margin-right: 6px; color: var(--line2); }
.ip-meta-row span:first-child::before { display: none; }
.ip-header-right { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.ip-gauge-wrap { text-align: center; }
.ip-gauge { width: 90px; height: 52px; display: block; margin: 0 auto -4px; }
.ip-gauge-num { font-family: var(--font-display); font-size: 28px; font-weight: 900; line-height: 1; }
.ip-gauge-label { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--hint); margin-top: 2px; }
.ip-header-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.ip-count { font-size: 11px; color: var(--hint); }

/* Area blocks */
.ip-area-block { border-bottom: 1px solid var(--line); }
.ip-area-block:last-child { border-bottom: 0; }
.ip-area-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px 8px;
  background: var(--navy);
}
.ip-area-name { font-family: var(--font-display); font-size: 13px; font-weight: 900; color: #fff; text-transform: uppercase; letter-spacing: .08em; }
.ip-area-avg  { font-family: var(--font-display); font-size: 20px; font-weight: 900; }

/* Test rows */
.ip-test-row {
  display: grid;
  grid-template-columns: 1fr 72px 1fr 48px 90px;
  gap: 0;
  align-items: center;
  padding: 9px 24px;
  border-bottom: 1px solid var(--s3);
  transition: background .1s;
}
.ip-test-row:last-child { border-bottom: 0; }
.ip-test-row:hover { background: var(--s2); }
.ip-test-name  { font-size: 13.5px; font-weight: 600; color: var(--text); }
.ip-test-raw   { font-size: 13px; color: var(--muted); text-align: right; padding-right: 12px; }
.ip-test-bar-wrap { padding: 0 12px; }
.ip-test-track { height: 6px; background: var(--line); border-radius: 999px; overflow: hidden; }
.ip-test-fill  { height: 100%; border-radius: 999px; transition: width .4s ease; }
.ip-test-markers { display: flex; justify-content: space-between; margin-top: 2px; }
.ip-test-markers span { font-size: 8.5px; color: var(--hint); }
.ip-test-score { font-family: var(--font-display); font-size: 22px; font-weight: 900; text-align: center; line-height: 1; }
.ip-test-grade { text-align: right; }

@media (max-width: 900px) {
  .ip-layout { grid-template-columns: 1fr; }
  .ip-sidebar { position: static; max-height: 260px; }
  .ip-test-row { grid-template-columns: 1fr 56px 80px 40px 80px; }
  .proto-toolbar-fields { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ip-header { flex-direction: column; }
  .ip-test-row { grid-template-columns: 1fr 1fr; gap: 6px; }
  .ip-test-bar-wrap, .ip-test-markers { display: none; }
}

/* ══════════════════════════════════════════════════════════
   ADMIN — ny layout
══════════════════════════════════════════════════════════ */
.admin-pg { padding-top: 24px; }

.adm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.adm-title { font-size: 27px; color: var(--navy); text-transform: uppercase; }

/* Flikar */
.adm-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--line);
  margin-bottom: 22px;
}
.adm-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 20px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: .15s;
  white-space: nowrap;
}
.adm-tab:hover { color: var(--text); }
.adm-tab.active { color: var(--navy); border-bottom-color: var(--blue); font-weight: 700; }
.adm-tab-cnt {
  font-size: 11px;
  font-weight: 700;
  background: var(--blue-3);
  color: var(--blue-2);
  border-radius: 999px;
  padding: 1px 8px;
}
.adm-tab.active .adm-tab-cnt { background: var(--blue); color: #fff; }

/* Kravprofiler — topbar */
.adm-prof-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.adm-prof-bar-meta { font-size: 12.5px; color: var(--muted); }

/* Sidebar + edit panel (återanvänder gammal layout) */
.admin-pg-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
  align-items: start;
}
.admin-sidebar {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  overflow: hidden;
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  display: flex;
  flex-direction: column;
}
.admin-sidebar-search { padding: 10px; border-bottom: 1px solid var(--line); }
.admin-sidebar-list   { flex: 1; overflow-y: auto; padding: 8px; }
.admin-sidebar-footer {
  padding: 10px 12px;
  border-top: 1px solid var(--line);
  background: var(--s2);
}

.admin-sport-group { margin-bottom: 10px; }
.admin-sport-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hint);
  padding: 4px 8px;
  display: block;
}
.admin-profile-row {
  width: 100%;
  text-align: left;
  background: none;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  transition: .12s;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 2px;
}
.admin-profile-row:hover  { background: var(--blue-3); border-color: var(--blue-4); }
.admin-profile-row.active { background: var(--navy); border-color: var(--navy); }
.admin-profile-row.active .apr-name { color: #fff; }
.apr-name { font-size: 13px; font-weight: 600; color: var(--text); }
.hidden-profile .apr-name { opacity: .5; }
.apr-badge {
  font-size: 10px;
  font-weight: 700;
  background: var(--amber-bg);
  color: var(--amber);
  border-radius: 5px;
  padding: 2px 6px;
}

/* Edit panel */
.admin-edit-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  overflow: hidden;
}
.admin-empty { padding: 60px 30px; text-align: center; color: var(--muted); }

.adm-edit { padding: 0; }
.adm-edit-hdr {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line);
  background: var(--s2);
}
.adm-edit-title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--navy);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.adm-edit-sub { font-size: 14px; font-weight: 500; color: var(--muted); text-transform: none; font-family: var(--font-body); }
.adm-fields { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 16px 22px; }
.adm-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 22px;
  background: var(--s2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  cursor: pointer;
}
.adm-toggle input { accent-color: var(--blue); width: 16px; height: 16px; flex-shrink: 0; margin-top: 2px; }
.adm-toggle-text strong { display: block; font-size: 13.5px; font-weight: 700; color: var(--text); }
.adm-toggle-text span   { font-size: 12px; color: var(--muted); }
.adm-groups-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 22px 10px;
}
.adm-groups-hdr h3 { font-size: 16px; color: var(--navy); text-transform: uppercase; }
.adm-group { border-top: 1px solid var(--line); padding: 0 22px 14px; }
.adm-group-hdr {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 8px;
}
.adm-group-name {
  flex: 1;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--navy);
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
}
.adm-group-name:focus { background: var(--blue-3); }

/* Testmoment-tabell — 7 kolumner */
.adm-items-table { background: var(--s2); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.adm-items-head {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr 1fr 1fr .4fr;
  gap: 6px;
  padding: 7px 10px;
  background: var(--s3);
  border-bottom: 1px solid var(--line);
}
.adm-items-head span {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--hint);
}
.adm-item-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr 1fr 1fr 1fr .4fr;
  gap: 6px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--line);
  align-items: center;
}
.adm-item-row:last-child { border-bottom: 0; }
.adm-items-empty { padding: 14px 10px; font-size: 13px; color: var(--muted); }

/* Användare — 2-col layout */
.adm-2col {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 16px;
  align-items: start;
}
.adm-section-hdr { margin-bottom: 12px; }
.adm-section-hdr h2 { font-size: 20px; color: var(--navy); text-transform: uppercase; }
.adm-cnt {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  text-transform: none;
  margin-left: 6px;
}
.adm-form-card { padding: 20px 22px; }

/* Användartabell */
.adm-user-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.adm-user-table th {
  background: var(--s2);
  font-family: var(--font-body);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 700;
  color: var(--muted);
  padding: 9px 12px;
  border-bottom: 2px solid var(--line);
  text-align: left;
  position: sticky;
  top: 0;
}
.adm-user-row td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}
.adm-user-row:last-child td { border-bottom: 0; }
.adm-owner-row td { background: #fafbff; }
.adm-user-row:hover td { background: var(--s2); }
.adm-user-name { font-size: 14px; font-weight: 700; color: var(--text); }
.adm-user-meta { font-size: 11.5px; color: var(--hint); margin-top: 2px; }
.adm-center { text-align: center; }
.adm-user-actions { display: flex; flex-direction: column; gap: 6px; }
.adm-credit-row { display: flex; gap: 5px; align-items: center; flex-wrap: wrap; }

/* Testomgångar — kortgrid */
.adm-sessions-hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.adm-sessions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 14px;
}
.adm-session-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  box-shadow: var(--sh);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .15s;
}
.adm-session-card:hover { box-shadow: var(--sh2); }
.adm-session-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.adm-session-name { font-size: 15px; font-weight: 700; color: var(--text); }
.adm-session-avg { font-size: 18px; font-weight: 900; font-family: var(--font-display); padding: 4px 12px; flex-shrink: 0; }
.adm-session-stats { display: flex; gap: 16px; }
.adm-session-stat span { display: block; font-size: 18px; font-weight: 700; color: var(--navy); font-family: var(--font-display); line-height: 1; }
.adm-session-stat small { display: block; font-size: 11px; color: var(--hint); margin-top: 2px; }
.adm-session-people { display: flex; flex-wrap: wrap; gap: 5px; }
.adm-session-actions { display: flex; gap: 6px; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .admin-pg-layout { grid-template-columns: 220px 1fr; }
  .adm-2col { grid-template-columns: 1fr; }
  .adm-items-head, .adm-item-row { grid-template-columns: 2fr 1fr 1.2fr .8fr .8fr .8fr .4fr; }
}
@media (max-width: 760px) {
  .admin-pg-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; max-height: 300px; }
  .adm-tabs { overflow-x: auto; }
  .adm-tab { font-size: 12.5px; padding: 9px 14px; }
  .adm-fields { grid-template-columns: 1fr 1fr; }
  .adm-items-head, .adm-item-row { grid-template-columns: 1fr; }
  .adm-sessions-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════
   MISC MISSING / LEGACY CLASSES
══════════════════════════════════════════════════════════ */

/* Cooper VO₂ hint below input */
.proto-vo2 {
  display: block;
  font-size: 10px;
  color: var(--blue);
  font-weight: 600;
  margin-top: 2px;
  line-height: 1.2;
  white-space: nowrap;
}
.cooper-cell { background: #fafbff !important; }

/* Hero mosaic alias (used in home() HTML) */
.cp-hero-mosaic { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 12px; min-height: 100%; }
.cp-hero-mosaic > div { position: relative; overflow: hidden; border-radius: 16px; }
.cp-hero-mosaic img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.cp-hero-mosaic > div:hover img { transform: scale(1.04); }
.cp-hero-mosaic .mosaic-large { grid-column: 1 / span 2; min-height: 310px; }
.cp-hero-mosaic .mosaic-small { min-height: 200px; }
.cp-hero-surface { /* alias for classic-look, already styled */ }

/* Panel (used in legacy tab analys) */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  overflow: hidden;
  box-shadow: var(--sh);
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line);
  background: var(--s2);
}
.panel-head h2 { font-size: 20px; color: var(--navy); text-transform: uppercase; }
.panel-body { padding: 16px 20px; }

/* Legacy analys grid */
.analys-grid { display: grid; grid-template-columns: 260px 1fr; gap: 14px; margin-bottom: 14px; }
.analys-big {
  background: var(--navy);
  border-radius: var(--rl);
  padding: 24px;
  color: #fff;
}
.analys-big .lbl { font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #5b7aa0; margin-bottom: 6px; }
.analys-big .num { font-family: var(--font-display); font-size: 72px; font-weight: 900; color: #fff; line-height: 1; }

.area-summary-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.area-summary-row span { font-size: 13px; color: var(--muted); min-width: 80px; }
.area-summary-row .bar { flex: 1; }
.area-summary-row .score-n { font-family: var(--font-display); font-size: 18px; font-weight: 900; color: var(--navy); min-width: 36px; text-align: right; }

.spelare-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.spelare-card {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.spelare-card strong { display: block; font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 4px; }
.sc-score {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  color: var(--navy);
  line-height: 1;
}
.mini-bar { height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; }
.mini-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ef4444, #f59e0b 40%, #22c55e 70%, #1855F4); }

/* ══════════════════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  .cp-hero-v5 { grid-template-columns: 1fr; }
  .flat-images { min-height: 340px; grid-template-rows: 220px 180px; }
  .flat-images .mosaic-large { min-height: 220px; }
  .cp-intro.cp-intro-modern { grid-template-columns: 1fr; }
  .cp-benefits { grid-template-columns: 1fr 1fr; }
  .cp-flow-grid { grid-template-columns: 1fr 1fr; }
  .info-benefit-list, .how-steps { grid-template-columns: 1fr 1fr; }
  .admin-pg-layout { grid-template-columns: 220px 1fr; }
  .classic-look h1 { font-size: 52px; }
  .to-settings-fields { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .topbar-inner { padding: 0 16px; height: 58px; }
  .nav { display: none; }
  .cp-hero-v5 { padding: 0 16px; }
  .classic-look { padding: 36px 28px; border-radius: 22px; }
  .classic-look h1 { font-size: 42px; }
  .classic-look p { font-size: 14.5px; }
  .flat-images { grid-template-columns: 1fr; grid-template-rows: 220px 180px 180px; border-radius: 22px; }
  .flat-images .mosaic-large { grid-column: auto; }
  .cp-benefits, .cp-flow-grid, .info-benefit-list, .how-steps, .how-split { grid-template-columns: 1fr; }
  .cp-intro.cp-intro-modern, .cp-benefits, .cp-flow, .cp-public-pricing, .cp-cta { padding-left: 16px; padding-right: 16px; }
  .cp-intro-main, .cp-cycle-panel, .cp-benefits article, .cp-flow-grid div, .info-hero-card, .info-wide-card, .how-flow-card, .how-testbank-card { padding: 22px; }
  .cp-intro-main h2, .cp-section-head h2, .cp-cta h2, .info-hero-card h2, .info-wide-card h2, .how-flow-card h2, .how-testbank-card h2, .public-price-hero h2 { font-size: 32px; }
  .cp-cta { flex-direction: column; padding-bottom: 36px; }
  .cp-cta .btn { margin-top: 14px; }
  .cp-public-price-grid, .public-price-grid, .price-grid, .price-summary { grid-template-columns: 1fr; }
  .public-price-note { flex-direction: column; }
  .to-header { flex-direction: column; align-items: flex-start; border-radius: var(--rl); padding: 18px 20px; }
  .to-settings-fields { grid-template-columns: 1fr 1fr; }
  .to-profil-layout { grid-template-columns: 1fr; }
  .to-profil-sidebar { border-right: 0; border-bottom: 1px solid var(--line); }
  .adm-items-head, .adm-item-row { grid-template-columns: 1fr; }
  .adm-fields { grid-template-columns: 1fr 1fr; }
  .admin-pg-layout { grid-template-columns: 1fr; }
  .admin-sidebar { position: static; max-height: 320px; }
  .page { padding: 20px 16px; }
}


/* ══════════════════════════════════════════════════════════
   MODERN APP LANDING PAGE 2026
══════════════════════════════════════════════════════════ */
:root{
  --bg:#f4f7fb;
  --navy:#07111f;
  --navy-2:#0d1f39;
  --blue:#1557ff;
  --cyan:#31d4ff;
  --surface:#ffffff;
  --line:#dce5f3;
  --muted:#64748b;
  --text:#07111f;
  --sh:0 14px 45px rgba(15,23,42,.08);
  --sh2:0 24px 80px rgba(15,23,42,.16);
  --font-display:'Barlow Condensed',system-ui,sans-serif;
  --font-body:'DM Sans',system-ui,sans-serif;
}
body{background:linear-gradient(180deg,#f8fbff 0%,#eef3fa 100%);}
.topbar{background:rgba(255,255,255,.82);backdrop-filter:blur(24px) saturate(150%);box-shadow:0 10px 30px rgba(15,23,42,.05)}
.logo{height:42px}.nav button{border-radius:999px}.nav button.active{background:#eaf0ff;color:var(--blue)}
.modern-home{background:#f4f7fb;overflow:hidden}.modern-home .eyebrow{color:#57b7ff;letter-spacing:.16em}
.hero-v2{position:relative;min-height:780px;background:#07111f;overflow:hidden;color:#fff}.hero-v2-bg{position:absolute;inset:0;display:grid;grid-template-columns:1.15fr .85fr .8fr;gap:0;opacity:.72}.hero-v2-bg img{width:100%;height:100%;object-fit:cover;filter:saturate(1.1) contrast(1.05)}.hero-v2-bg img:nth-child(2){clip-path:polygon(9% 0,100% 0,91% 100%,0 100%)}.hero-v2-bg img:nth-child(3){clip-path:polygon(14% 0,100% 0,100% 100%,0 100%)}.hero-v2-shade{position:absolute;inset:0;background:radial-gradient(circle at 72% 22%,rgba(21,87,255,.34),transparent 32%),linear-gradient(90deg,rgba(7,17,31,.96) 0%,rgba(7,17,31,.82) 43%,rgba(7,17,31,.46) 100%)}.hero-v2-grid{position:relative;z-index:2;max-width:1240px;margin:0 auto;min-height:780px;padding:92px 24px 72px;display:grid;grid-template-columns:minmax(0,1.05fr) 420px;gap:54px;align-items:center}.hero-v2-kicker{display:inline-flex;align-items:center;gap:10px;padding:8px 13px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:999px;color:#bfdbfe;font-weight:800;font-size:12px;letter-spacing:.09em;text-transform:uppercase}.hero-v2-kicker span{background:var(--blue);color:#fff;padding:3px 8px;border-radius:999px}.hero-v2 h1{font-size:clamp(54px,8vw,108px);line-height:.82;text-transform:uppercase;max-width:780px;margin:26px 0 24px;letter-spacing:-.04em}.hero-v2-copy p{font-size:19px;line-height:1.7;color:rgba(255,255,255,.76);max-width:650px}.hero-v2-actions{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 24px}.hero-v2-primary{background:linear-gradient(135deg,var(--blue),#36b5ff);border:0;color:#fff;border-radius:999px;padding:14px 28px;font-weight:900;box-shadow:0 18px 40px rgba(21,87,255,.35)}.hero-v2-primary:hover{transform:translateY(-2px);box-shadow:0 24px 56px rgba(21,87,255,.42)}.hero-v2-secondary{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.24);color:#fff;border-radius:999px;padding:14px 24px;font-weight:800}.hero-v2-points{display:flex;flex-wrap:wrap;gap:10px}.hero-v2-points span{border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.07);border-radius:999px;padding:8px 12px;color:rgba(255,255,255,.73);font-size:13px;font-weight:700}.hero-v2-panel{background:linear-gradient(180deg,rgba(255,255,255,.18),rgba(255,255,255,.08));border:1px solid rgba(255,255,255,.22);border-radius:32px;padding:24px;box-shadow:0 30px 90px rgba(0,0,0,.35);backdrop-filter:blur(18px);align-self:center}.panel-top{display:flex;justify-content:space-between;color:#c7d2fe;font-size:12px;text-transform:uppercase;letter-spacing:.12em;font-weight:800}.panel-top b{color:#fff}.score-ring{width:220px;height:220px;border-radius:50%;margin:28px auto;background:conic-gradient(from 230deg,#31d4ff 0 84%,rgba(255,255,255,.12) 84% 100%);display:grid;place-items:center;box-shadow:inset 0 0 0 14px rgba(7,17,31,.58)}.score-ring div{width:154px;height:154px;border-radius:50%;background:rgba(7,17,31,.9);display:grid;place-items:center;text-align:center}.score-ring strong{font-family:var(--font-display);font-size:62px;line-height:.8}.score-ring span{color:#93c5fd;font-weight:800}.metric-list{display:grid;gap:14px}.metric-list div{position:relative;background:rgba(255,255,255,.08);border-radius:16px;padding:13px 14px 18px;overflow:hidden}.metric-list span{color:#cbd5e1;font-weight:800}.metric-list b{float:right;color:#fff}.metric-list i{position:absolute;left:14px;right:14px;bottom:8px;height:5px;border-radius:999px;background:linear-gradient(90deg,#1557ff,#31d4ff)}.hero-panel-btn{margin-top:18px;width:100%;background:#fff;color:#07111f;border:0;border-radius:999px;font-weight:900}.sport-strip-v2{display:flex;gap:10px;align-items:center;overflow:auto;background:#fff;border-bottom:1px solid var(--line);padding:16px max(24px,calc((100vw - 1240px)/2 + 24px));box-shadow:0 10px 35px rgba(15,23,42,.05)}.sport-strip-v2 span{text-transform:uppercase;letter-spacing:.14em;font-size:11px;font-weight:900;color:var(--muted);white-space:nowrap}.sport-strip-v2 b{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:8px 14px;background:#f8fbff;color:#0f172a;font-size:13px}.section-v2{max-width:1240px;margin:0 auto;padding:92px 24px}.intro-v2{display:grid;grid-template-columns:minmax(0,1.15fr) .85fr;gap:24px}.intro-card{border-radius:34px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);overflow:hidden}.intro-card.big{padding:48px}.intro-card h2,.section-title-v2 h2,.dark-showcase-v2 h2,.final-v2 h2{font-size:clamp(42px,5vw,72px);text-transform:uppercase;line-height:.88;letter-spacing:-.035em}.intro-card p{font-size:17px;line-height:1.78;color:var(--muted);max-width:720px;margin-top:18px}.mini-checks{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}.mini-checks span{background:#eef4ff;color:#0b3bbb;border-radius:999px;padding:10px 14px;font-weight:900}.intro-card.photo{position:relative;min-height:360px}.intro-card.photo img{width:100%;height:100%;object-fit:cover}.intro-card.photo div{position:absolute;left:22px;right:22px;bottom:22px;padding:18px;border-radius:22px;background:rgba(7,17,31,.82);backdrop-filter:blur(12px);color:#fff}.intro-card.photo b{display:block;font-family:var(--font-display);font-size:28px;text-transform:uppercase}.intro-card.photo span{display:block;color:#cbd5e1;line-height:1.5}.feature-grid-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;padding-top:0}.feature-grid-v2 article,.audience-grid-v2 article{background:#fff;border:1px solid var(--line);border-radius:28px;padding:28px;box-shadow:var(--sh);transition:.18s}.feature-grid-v2 article:hover,.audience-grid-v2 article:hover{transform:translateY(-4px);box-shadow:var(--sh2)}.feature-grid-v2 em{font-family:var(--font-display);font-style:normal;font-size:42px;color:#1557ff;font-weight:900}.feature-grid-v2 h3,.audience-grid-v2 h3{font-family:var(--font-display);font-size:32px;text-transform:uppercase;margin:16px 0 8px}.feature-grid-v2 p,.audience-grid-v2 p{color:var(--muted);line-height:1.65}.dark-showcase-v2{background:radial-gradient(circle at 80% 0,rgba(21,87,255,.28),transparent 34%),linear-gradient(135deg,#07111f,#0d1f39);color:#fff}.dark-showcase-inner{display:grid;grid-template-columns:minmax(0,1fr) 450px;gap:56px;align-items:center}.dark-showcase-v2 p{font-size:17px;line-height:1.75;color:#aab9d2;margin:18px 0 28px;max-width:650px}.glass-stats{display:grid;grid-template-columns:1fr;gap:16px}.glass-stats div{border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);border-radius:28px;padding:28px;backdrop-filter:blur(16px)}.glass-stats strong{font-family:var(--font-display);font-size:70px;line-height:.8}.glass-stats span{display:block;color:#b9c7df;font-weight:800;margin-top:8px}.section-title-v2{text-align:center;max-width:820px;margin:0 auto 42px}.audience-grid-v2{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.audience-grid-v2 article span{font-size:36px}.pricing-v2{background:#fff}.price-grid-v2{display:grid;grid-template-columns:1fr 1fr;gap:24px;max-width:860px;margin:0 auto}.price-grid-v2 article{position:relative;border-radius:32px;border:1px solid var(--line);background:#f8fbff;padding:38px;box-shadow:var(--sh)}.price-grid-v2 article.featured{background:linear-gradient(135deg,#07111f,#0c2867);color:#fff;border-color:#1557ff;transform:scale(1.03)}.price-grid-v2 article>div{position:absolute;right:28px;top:-14px;background:#1557ff;color:#fff;border-radius:999px;padding:7px 14px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.12em}.price-grid-v2 span{text-transform:uppercase;letter-spacing:.13em;font-weight:900;font-size:12px;color:#1557ff}.price-grid-v2 .featured span{color:#93c5fd}.price-grid-v2 h3{font-family:var(--font-display);font-size:64px;line-height:.85;margin:16px 0 8px}.price-grid-v2 p{color:var(--muted);font-weight:800}.price-grid-v2 .featured p{color:#cbd5e1}.price-grid-v2 ul{list-style:none;display:grid;gap:10px;margin:24px 0}.price-grid-v2 li{position:relative;padding-left:24px}.price-grid-v2 li:before{content:'✓';position:absolute;left:0;color:#1557ff;font-weight:900}.price-grid-v2 .featured li:before{color:#31d4ff}.final-v2{padding:100px 24px;background:linear-gradient(135deg,#eaf1ff,#fff)}.final-v2-inner{max-width:720px;margin:0 auto;text-align:center;background:#fff;border:1px solid var(--line);border-radius:36px;padding:54px;box-shadow:var(--sh2)}.final-v2 img{height:54px;margin-bottom:22px}.final-v2 p{color:var(--muted);font-size:17px;margin:14px 0 28px}
@media(max-width:1050px){.hero-v2-grid,.intro-v2,.dark-showcase-inner{grid-template-columns:1fr}.hero-v2-panel{max-width:520px}.feature-grid-v2,.audience-grid-v2{grid-template-columns:1fr 1fr}.hero-v2-bg{grid-template-columns:1fr}.hero-v2-bg img:nth-child(n+2){display:none}.hero-v2-grid{min-height:auto;padding-top:120px}.hero-v2{min-height:auto}}
@media(max-width:720px){.topbar-inner{padding:0 14px}.logo{height:34px}.hero-v2-grid{padding:82px 18px 52px;gap:28px}.hero-v2-copy p{font-size:16px}.hero-v2-panel{border-radius:24px;padding:18px}.score-ring{width:176px;height:176px}.score-ring div{width:124px;height:124px}.score-ring strong{font-size:50px}.section-v2{padding:58px 18px}.intro-card.big{padding:28px}.feature-grid-v2,.audience-grid-v2,.price-grid-v2{grid-template-columns:1fr}.price-grid-v2 article.featured{transform:none}.dark-showcase-inner{gap:28px}.final-v2{padding:58px 18px}.final-v2-inner{padding:32px 22px}}

/* =====================================================================
   APProfile.se refined design layer
   Modernare startsida, nytt typsnitt och mjukare premiumkänsla.
   ===================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Space+Grotesk:wght@600;700;800&display=swap');

:root{
  --font-body: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --navy:#071225;
  --navy-2:#0b1b34;
  --blue:#2563ff;
  --cyan:#29d3ff;
  --mint:#2ff2c4;
  --bg:#f5f7fb;
  --surface:#ffffff;
  --line:#dde6f2;
  --muted:#667085;
  --text:#071225;
  --sh: 0 12px 32px rgba(7,18,37,.08);
  --sh2: 0 24px 70px rgba(7,18,37,.18);
}

body{
  background:
    radial-gradient(circle at top left, rgba(37,99,255,.08), transparent 30vw),
    radial-gradient(circle at top right, rgba(47,242,196,.10), transparent 28vw),
    var(--bg);
}

.topbar{
  background:rgba(255,255,255,.90);
  border-bottom:1px solid rgba(221,230,242,.9);
  backdrop-filter:blur(18px);
}
.topbar-inner{height:72px;}
.logo{height:44px;}
.nav button{
  border-radius:999px;
  font-size:13px;
  letter-spacing:-.01em;
}
.nav button.active{
  background:#eef4ff;
  color:var(--blue);
}
.nav .nav-cta,
.nav-right .nav-cta{
  border-radius:999px;
  padding:10px 18px;
  background:linear-gradient(135deg,var(--navy),#1e2f50);
  box-shadow:0 10px 24px rgba(7,18,37,.18);
}
.nav-register{
  border-radius:999px;
  padding:9px 18px;
}

/* Startsida / hero */
.cp-hero{
  overflow:hidden;
  border-radius:32px;
  min-height:620px;
  box-shadow:var(--sh2);
  background:
    linear-gradient(105deg, rgba(7,18,37,.98) 0%, rgba(7,18,37,.87) 43%, rgba(7,18,37,.48) 68%, rgba(7,18,37,.15) 100%),
    linear-gradient(135deg, var(--navy), var(--blue));
  position:relative;
}
.cp-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 78% 25%, rgba(41,211,255,.34), transparent 24%),
    radial-gradient(circle at 64% 78%, rgba(47,242,196,.22), transparent 22%),
    linear-gradient(90deg, rgba(7,18,37,.32), transparent 50%);
  pointer-events:none;
}
.cp-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:34%;
  background:linear-gradient(0deg, rgba(7,18,37,.72), transparent);
  pointer-events:none;
}
.cp-hero > *{position:relative; z-index:1;}

.cp-hero h1,
.hero h1,
.home-hero h1,
.start-hero h1{
  font-family:var(--font-display);
  font-weight:800;
  letter-spacing:-.075em;
  line-height:.86;
  max-width:760px;
  text-wrap:balance;
}
.cp-hero h1{
  font-size:clamp(54px, 8.2vw, 118px);
}
.cp-hero p,
.hero p,
.home-hero p,
.start-hero p{
  font-size:clamp(16px, 1.4vw, 20px);
  line-height:1.55;
  color:rgba(255,255,255,.82);
  max-width:620px;
}

.eyebrow,
.cp-kicker,
.hero-kicker{
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.10);
  color:#bfeeff;
  padding:8px 13px;
  border-radius:999px;
  backdrop-filter:blur(10px);
  letter-spacing:.10em;
}

.btn,
.cp-primary,
.cp-secondary{
  border-radius:999px;
  font-weight:800;
  letter-spacing:-.01em;
}
.btn.primary,
.cp-primary{
  background:linear-gradient(135deg,var(--blue),#143bd6);
  border-color:transparent;
  box-shadow:0 16px 34px rgba(37,99,255,.34);
}
.btn.primary:hover,
.cp-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 20px 44px rgba(37,99,255,.42);
}
.cp-secondary,
.btn.light{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
}

.cp-score-card,
.live-card,
.hero-card,
[class*="score-card"]{
  background:linear-gradient(180deg, rgba(255,255,255,.20), rgba(255,255,255,.10)) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  box-shadow:0 30px 80px rgba(0,0,0,.28) !important;
  backdrop-filter:blur(18px);
  border-radius:30px !important;
}

.card,
.soft-card{
  border-radius:24px;
  border-color:rgba(221,230,242,.95);
  box-shadow:0 12px 32px rgba(7,18,37,.07);
}
.card:hover{
  box-shadow:0 18px 44px rgba(7,18,37,.10);
}
.section-title,
.page h2{
  font-family:var(--font-display);
  letter-spacing:-.055em;
}

.price-card,
.pricing-card,
[class*="price"] .card{
  border-radius:28px !important;
  box-shadow:0 18px 48px rgba(7,18,37,.09);
}
.price-card.featured,
.pricing-card.featured{
  border-color:rgba(37,99,255,.36);
  box-shadow:0 26px 64px rgba(37,99,255,.18);
}

input, select, textarea{
  border-radius:14px !important;
  border-color:#d9e3f0 !important;
}
input:focus, select:focus, textarea:focus{
  outline:none;
  border-color:var(--blue) !important;
  box-shadow:0 0 0 4px rgba(37,99,255,.12);
}

.pill{
  border-radius:999px;
  padding:5px 11px;
}
.to-tabs{
  border-radius:999px;
  padding:6px;
}
.to-tab{
  border-radius:999px;
}

.page > section,
.cp-section,
.home-section{
  margin-block:34px;
}

.footer{
  border-top:1px solid var(--line);
  background:#fff;
}

@media (max-width: 820px){
  .topbar-inner{height:auto; min-height:68px; flex-wrap:wrap; padding:12px 16px;}
  .logo{height:38px;}
  .nav{order:3; width:100%; overflow:auto; padding-bottom:4px;}
  .cp-hero{
    border-radius:0;
    min-height:640px;
    margin-left:-24px;
    margin-right:-24px;
  }
  .cp-hero h1{
    font-size:clamp(46px, 16vw, 72px);
  }
}


/* ══════════════════════════════════════════════════════════
   APP 2026 visual refresh – Orbitron, tighter hero, premium home
══════════════════════════════════════════════════════════ */
:root{
  --font-display:'Orbitron', system-ui, sans-serif;
  --blue:#1D5CFF;
  --blue-2:#0B43D8;
  --navy:#061225;
  --bg:#F3F6FB;
  --sh:0 10px 30px rgba(6,18,37,.07);
  --sh2:0 20px 70px rgba(6,18,37,.16);
}
body{font-size:14px;background:linear-gradient(180deg,#F6F8FC 0%,#EEF3FA 100%);}
h1,h2,h3,h4,.nav button,.to-tab,.btn{letter-spacing:-.025em;}
.topbar{background:rgba(255,255,255,.88);box-shadow:0 8px 28px rgba(6,18,37,.05);}
.topbar-inner{height:60px}.logo{height:34px}.nav button{font-size:12.5px;border-radius:999px;padding:7px 12px}.nav .nav-cta,.nav-right .nav-cta{box-shadow:0 10px 24px rgba(29,92,255,.18)}

.hero-v2{min-height:640px;background:#061225;isolation:isolate;}
.hero-v2-bg{opacity:.58;grid-template-columns:1.05fr .95fr .8fr;}
.hero-v2-bg img{filter:saturate(1.02) contrast(1.08) brightness(.92);}
.hero-v2-shade{background:
  radial-gradient(circle at 74% 18%,rgba(29,92,255,.38),transparent 30%),
  radial-gradient(circle at 32% 84%,rgba(0,210,255,.13),transparent 30%),
  linear-gradient(90deg,rgba(6,18,37,.98) 0%,rgba(6,18,37,.87) 46%,rgba(6,18,37,.50) 100%);
}
.hero-v2-grid{min-height:640px;padding:74px 24px 58px;grid-template-columns:minmax(0,1.02fr) 390px;gap:48px;}
.hero-v2-kicker{font-family:var(--font-display);font-size:10px;letter-spacing:.16em;padding:7px 11px;background:rgba(255,255,255,.075);border-color:rgba(255,255,255,.18);}
.hero-v2-kicker span{letter-spacing:.08em;padding:3px 7px;}
.hero-v2 h1{font-size:clamp(38px,5.7vw,68px);line-height:1.02;letter-spacing:-.055em;max-width:720px;margin:22px 0 18px;text-transform:uppercase;text-wrap:balance;}
.hero-v2-copy p{font-size:16px;line-height:1.72;max-width:590px;color:rgba(255,255,255,.76);}
.hero-v2-actions{margin:28px 0 18px}.hero-v2-primary,.hero-v2-secondary{padding:12px 22px;font-size:13px}.hero-v2-primary{background:linear-gradient(135deg,#1D5CFF,#00B7FF);box-shadow:0 16px 38px rgba(29,92,255,.32)}
.hero-v2-points{gap:8px}.hero-v2-points span{font-size:12px;padding:7px 10px;background:rgba(255,255,255,.055)}
.hero-v2-panel{border-radius:26px;padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,.075));box-shadow:0 26px 75px rgba(0,0,0,.33)}
.score-ring{width:190px;height:190px;margin:22px auto;box-shadow:inset 0 0 0 12px rgba(6,18,37,.62)}.score-ring div{width:134px;height:134px}.score-ring strong{font-size:42px;letter-spacing:-.04em}.score-ring span{font-size:12px}.metric-list{gap:11px}.metric-list div{border-radius:14px;padding:11px 12px 16px}.metric-list span,.metric-list b{font-size:12.5px}.hero-panel-btn{padding:11px 16px;font-size:13px}

.sport-strip-v2{padding-top:13px;padding-bottom:13px}.sport-strip-v2 b{font-size:12px;padding:7px 12px;background:#fff}.section-v2{padding:76px 24px}.intro-card{border-radius:26px}.intro-card.big{padding:38px}.intro-card h2,.section-title-v2 h2,.dark-showcase-v2 h2,.final-v2 h2{font-size:clamp(30px,4vw,48px);line-height:1.04;letter-spacing:-.04em}.intro-card p,.dark-showcase-v2 p,.final-v2 p{font-size:15px;line-height:1.72}.intro-card.photo{min-height:320px}.intro-card.photo b{font-size:20px;letter-spacing:-.03em}.mini-checks span{padding:8px 12px;font-size:12px}.feature-grid-v2 article,.audience-grid-v2 article{border-radius:22px;padding:22px}.feature-grid-v2 em{font-size:28px}.feature-grid-v2 h3,.audience-grid-v2 h3{font-size:20px;line-height:1.12;letter-spacing:-.03em}.feature-grid-v2 p,.audience-grid-v2 p{font-size:13.5px}.dark-showcase-inner{grid-template-columns:minmax(0,1fr) 390px;gap:44px}.glass-stats strong{font-size:42px}.glass-stats div{border-radius:22px;padding:22px}.price-grid-v2 article{border-radius:26px;padding:30px}.price-grid-v2 h3{font-size:44px;line-height:1}.final-v2{padding:82px 24px}.final-v2-inner{border-radius:30px;padding:44px}.final-v2 img{height:48px}

@media(max-width:1050px){.hero-v2-grid{min-height:auto;padding-top:96px}.hero-v2{min-height:auto}.hero-v2-panel{max-width:460px}.dark-showcase-inner{grid-template-columns:1fr}}
@media(max-width:720px){.topbar-inner{height:58px}.hero-v2-grid{padding:74px 18px 46px}.hero-v2 h1{font-size:clamp(34px,11vw,46px)}.hero-v2-copy p{font-size:15px}.hero-v2-actions .btn{width:100%}.hero-v2-panel{border-radius:22px}.section-v2{padding:52px 18px}.intro-card.big{padding:24px}.intro-card h2,.section-title-v2 h2,.dark-showcase-v2 h2,.final-v2 h2{font-size:30px}.feature-grid-v2,.audience-grid-v2,.price-grid-v2{grid-template-columns:1fr}.final-v2-inner{padding:28px 20px}}


/* ══════════════════════════════════════════════════════════
   ALFORIA / VINTAGE SANS TEST
   Mer exklusiv, smalare och mer kontrollerad startsida.
══════════════════════════════════════════════════════════ */
h1, h2, h3, h4,
.hero-v2 h1,
.intro-card h2,
.section-title-v2 h2,
.dark-showcase-v2 h2,
.final-v2 h2,
.feature-grid-v2 h3,
.audience-grid-v2 h3,
.price-grid-v2 h3,
.score-ring strong,
.glass-stats strong {
  font-family: var(--font-display);
  letter-spacing: .015em;
  font-weight: 800;
}

.hero-v2 h1 {
  font-size: clamp(36px, 5.1vw, 62px);
  line-height: 1.06;
  letter-spacing: .01em;
  max-width: 690px;
}

.hero-v2-copy p {
  font-size: 15.5px;
  max-width: 560px;
}

.hero-v2-kicker {
  letter-spacing: .18em;
}

.intro-card h2,
.section-title-v2 h2,
.dark-showcase-v2 h2,
.final-v2 h2 {
  font-size: clamp(34px, 4.1vw, 58px);
  line-height: .98;
  letter-spacing: .015em;
}

.feature-grid-v2 h3,
.audience-grid-v2 h3 {
  font-size: 26px;
  letter-spacing: .02em;
}

.price-grid-v2 h3 {
  font-size: 56px;
  letter-spacing: .01em;
}

@media(max-width:720px){
  .hero-v2 h1{font-size:clamp(32px,9.5vw,42px);line-height:1.08;}
  .hero-v2-copy p{font-size:15px;}
  .intro-card h2,.section-title-v2 h2,.dark-showcase-v2 h2,.final-v2 h2{font-size:29px;}
}


/* ══════════════════════════════════════════════════════════
   QUESTRIAL VERSION – mindre text, mer professionell layout
   Fri Google Font: Questrial för rubriker, DM Sans för brödtext.
══════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Questrial&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

:root{
  --font-display:'Questrial', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body:'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

body{
  font-size:13.5px;
  line-height:1.5;
}

/* Kompaktare toppmeny */
.topbar-inner{height:58px;}
.logo{height:34px;}
.nav button{font-size:12px;padding:6px 11px;}
.nav-register,.nav-admin-btn{font-size:12px;padding:6px 12px;}

/* Startsidans huvudsektion – mindre text och mer luft */
.hero-v2{min-height:600px;}
.hero-v2-grid{
  min-height:600px;
  padding:66px 24px 50px;
  grid-template-columns:minmax(0,1fr) 360px;
  gap:44px;
}
.hero-v2-kicker{
  font-family:var(--font-body);
  font-size:9.5px;
  letter-spacing:.14em;
  padding:6px 10px;
}
.hero-v2 h1{
  font-family:var(--font-display);
  font-size:clamp(34px,4.55vw,56px);
  line-height:1.08;
  letter-spacing:-.018em;
  font-weight:400;
  max-width:650px;
  margin:18px 0 14px;
  text-transform:none;
}
.hero-v2-copy p{
  font-size:14.5px;
  line-height:1.65;
  max-width:520px;
  color:rgba(255,255,255,.74);
}
.hero-v2-actions{margin:24px 0 16px;}
.hero-v2-primary,.hero-v2-secondary{padding:10px 18px;font-size:12.5px;}
.hero-v2-points{gap:7px;}
.hero-v2-points span{font-size:11.5px;padding:6px 9px;}

/* Mindre panel i hero */
.hero-v2-panel{max-width:360px;border-radius:22px;padding:18px;}
.hero-v2-panel h3{font-size:18px;font-weight:400;letter-spacing:-.01em;}
.hero-v2-panel p{font-size:12.5px;line-height:1.5;}
.score-ring{width:166px;height:166px;margin:18px auto;}
.score-ring div{width:116px;height:116px;}
.score-ring strong{font-family:var(--font-display);font-size:34px;font-weight:400;letter-spacing:-.02em;}
.score-ring span{font-size:11px;}
.metric-list{gap:9px;}
.metric-list div{border-radius:12px;padding:9px 10px 13px;}
.metric-list span,.metric-list b{font-size:11.5px;}
.hero-panel-btn{padding:10px 14px;font-size:12px;}

/* Sektioner – rubriker mindre och mer premium */
.section-v2{padding:62px 24px;}
.intro-card.big{padding:32px;}
.intro-card h2,
.section-title-v2 h2,
.dark-showcase-v2 h2,
.final-v2 h2{
  font-family:var(--font-display);
  font-size:clamp(24px,2.7vw,34px);
  line-height:1.1;
  letter-spacing:-.015em;
  font-weight:400;
}
.intro-card p,
.dark-showcase-v2 p,
.final-v2 p{
  font-size:14px;
  line-height:1.68;
}
.section-title-v2{margin-bottom:32px;}

.feature-grid-v2 article,
.audience-grid-v2 article{padding:20px;border-radius:20px;}
.feature-grid-v2 em{font-size:24px;}
.feature-grid-v2 h3,
.audience-grid-v2 h3{
  font-family:var(--font-display);
  font-size:20px;
  line-height:1.15;
  letter-spacing:-.01em;
  font-weight:400;
  margin:12px 0 7px;
}
.feature-grid-v2 p,
.audience-grid-v2 p{font-size:13px;line-height:1.6;}

.glass-stats strong{font-family:var(--font-display);font-size:34px;font-weight:400;}
.glass-stats span{font-size:12px;}
.price-grid-v2 article{padding:26px;border-radius:22px;}
.price-grid-v2 h3{font-family:var(--font-display);font-size:38px;font-weight:400;letter-spacing:-.015em;}
.price-grid-v2 p,.price-grid-v2 li{font-size:13px;}
.final-v2{padding:70px 24px;}
.final-v2-inner{padding:38px;border-radius:26px;}

/* Vanliga app-sidor: lite tätare och mindre */
.page{padding:22px 24px;}
.page h1{font-size:clamp(28px,3vw,40px);font-weight:400;}
.page h2{font-size:clamp(22px,2.2vw,30px);font-weight:400;}
.card,.soft-card{border-radius:18px;}
.btn{font-size:12.5px;padding:8px 14px;}
.input,select,textarea{font-size:13px;padding:7px 10px;}
.to-tab{font-size:12.5px;padding:8px 16px;}

@media(max-width:1050px){
  .hero-v2-grid{grid-template-columns:1fr;min-height:auto;padding-top:88px;}
  .hero-v2-panel{max-width:400px;}
}
@media(max-width:720px){
  .topbar-inner{height:auto;min-height:56px;padding:10px 14px;}
  .logo{height:32px;}
  .hero-v2-grid{padding:68px 18px 42px;}
  .hero-v2 h1{font-size:clamp(31px,9vw,40px);line-height:1.1;}
  .hero-v2-copy p{font-size:14px;line-height:1.6;}
  .hero-v2-actions .btn{width:100%;}
  .section-v2{padding:46px 18px;}
  .intro-card.big{padding:22px;}
  .intro-card h2,.section-title-v2 h2,.dark-showcase-v2 h2,.final-v2 h2{font-size:27px;}
  .feature-grid-v2,.audience-grid-v2,.price-grid-v2{grid-template-columns:1fr;}
  .final-v2-inner{padding:26px 18px;}
}

/* APP update: snabb protokollinmatning */
.pt-entry-input {
  scroll-margin: 90px;
}
.pt-entry-input:focus {
  outline: none;
}
.pt-name-input,
.pt-meta-input {
  min-height: 30px;
  border-radius: 7px;
}
.pt-name-input:focus,
.pt-meta-input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(24,85,244,.12);
}
.pt-meta-input {
  font-weight: 600;
}

/* APP update: tydlig sparaknapp i admin */
#saveProfileChanges {
  min-width: 132px;
}
#saveProfileChanges.pulse-save {
  box-shadow: 0 0 0 3px rgba(24,85,244,.14);
}

/* APP update: tydligare sparaknapp och sortering i admin */
.adm-savebar {
  position: sticky;
  top: 74px;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: rgba(255,255,255,.96);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 12px 0 16px;
  box-shadow: var(--sh);
  backdrop-filter: blur(14px);
}
.adm-savebar strong {
  display: block;
  font-size: 13px;
  color: var(--text);
}
.adm-savebar span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-top: 1px;
}
.adm-items-head-sort,
.adm-item-row-sort {
  grid-template-columns: 78px 1.4fr .8fr .9fr .75fr .75fr 1fr 54px !important;
}
.adm-sort-controls {
  display: flex;
  gap: 4px;
  align-items: center;
  justify-content: center;
}
.adm-sort-controls .btn {
  min-width: 30px;
  padding-left: 0;
  padding-right: 0;
}
.adm-group-footer {
  display: flex;
  justify-content: flex-start;
  padding: 10px 0 2px;
}
#saveProfileChanges,
.saveProfileChanges {
  min-width: 132px;
}
.saveProfileChanges.pulse-save {
  box-shadow: 0 0 0 3px rgba(24,85,244,.14);
}
@media (max-width: 900px) {
  .adm-savebar {
    top: 68px;
    align-items: flex-start;
    flex-direction: column;
  }
}

/* APP update: enklare adminnavigering för många kravprofiler */
.adm-prof-bar-sticky {
  position: sticky;
  top: 64px;
  z-index: 31;
  background: rgba(242,245,250,.96);
  backdrop-filter: blur(14px);
  padding-top: 8px;
  padding-bottom: 8px;
  margin-bottom: 12px;
}
.adm-dashboard {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 2px 2px 14px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}
.adm-sport-tile {
  min-width: 158px;
  text-align: left;
  border: 1px solid var(--line);
  background: var(--surface);
  border-radius: 14px;
  padding: 12px 14px;
  box-shadow: var(--sh);
  transition: .15s;
}
.adm-sport-tile:hover {
  border-color: var(--blue-4);
  transform: translateY(-1px);
}
.adm-sport-tile.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.adm-sport-tile strong {
  display: block;
  font-size: 14px;
  margin-bottom: 4px;
  white-space: nowrap;
}
.adm-sport-tile span,
.adm-sport-tile em {
  display: block;
  font-size: 11.5px;
  color: var(--muted);
  font-style: normal;
  line-height: 1.35;
}
.adm-sport-tile.active span,
.adm-sport-tile.active em {
  color: rgba(255,255,255,.72);
}
.admin-pg-layout-modern {
  grid-template-columns: minmax(320px, 380px) 1fr;
  align-items: start;
}
.admin-sidebar-modern {
  position: sticky;
  top: 142px;
  max-height: calc(100vh - 160px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.admin-filter-panel {
  padding: 14px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
  display: grid;
  gap: 10px;
}
.adm-mini-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.adm-mini-stats div {
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px;
  text-align: center;
}
.adm-mini-stats strong {
  display: block;
  font-size: 18px;
  color: var(--navy);
  line-height: 1;
}
.adm-mini-stats span {
  display: block;
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 3px;
}
.admin-sidebar-list-modern {
  overflow-y: auto;
  padding: 10px;
}
.admin-profile-row-modern {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-height: 58px;
}
.admin-profile-row-modern .apr-name {
  font-size: 13px;
}
.apr-meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.35;
}
.apr-badge.ok {
  background: var(--green-bg);
  color: #15803d;
}
.admin-empty-small {
  color: var(--muted);
  font-size: 13px;
  text-align: center;
  padding: 24px 12px;
}
.admin-edit-panel-modern {
  min-width: 0;
}
@media (max-width: 980px) {
  .admin-pg-layout-modern {
    grid-template-columns: 1fr;
  }
  .admin-sidebar-modern {
    position: relative;
    top: auto;
    max-height: none;
  }
  .adm-prof-bar-sticky {
    top: 56px;
  }
}

/* APP update: extra tydlig sparaknapp i admin */
.big-save-label,
.saveProfileChanges.big-save-label {
  font-weight: 900;
  letter-spacing: .02em;
  padding: 10px 16px;
  background: var(--blue) !important;
  border-color: var(--blue) !important;
  color: #fff !important;
}
.admin-floating-save {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 9999;
  border: 0;
  border-radius: 999px;
  padding: 15px 24px;
  background: var(--blue);
  color: #fff;
  font-weight: 900;
  letter-spacing: .03em;
  box-shadow: 0 12px 38px rgba(24,85,244,.35), 0 4px 12px rgba(10,22,40,.22);
  cursor: pointer;
  transition: .15s;
}
.admin-floating-save:hover {
  transform: translateY(-2px);
  background: var(--blue-2);
}
.admin-floating-save.dirty {
  background: #16a34a;
  box-shadow: 0 12px 38px rgba(22,163,74,.32), 0 4px 12px rgba(10,22,40,.22);
}
.adm-savebar {
  border: 2px solid var(--blue-4) !important;
}
.adm-savebar .saveProfileChanges {
  font-weight: 900;
  min-width: 180px;
}
@media (max-width: 700px) {
  .admin-floating-save {
    right: 16px;
    left: 16px;
    bottom: 16px;
    width: auto;
  }
}

/* APP update: alltid synlig huvudknapp för att spara i admin */
.adm-header-save {
  position: sticky;
  top: 64px;
  z-index: 10000;
  background: rgba(242,245,250,.97);
  backdrop-filter: blur(16px);
  border: 2px solid var(--blue-4);
  border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 8px 28px rgba(10,22,40,.12);
}
.adm-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.admin-main-save {
  border: 0;
  border-radius: 999px;
  padding: 13px 22px;
  background: #16a34a;
  color: #fff;
  font-weight: 900;
  letter-spacing: .03em;
  box-shadow: 0 8px 22px rgba(22,163,74,.28);
  cursor: pointer;
  white-space: nowrap;
}
.admin-main-save:hover {
  background: #15803d;
  transform: translateY(-1px);
}
.admin-global-savebar {
  position: sticky;
  top: 142px;
  z-index: 9999;
  margin: 12px 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 2px solid #bbf7d0;
  background: #f0fdf4;
  color: #14532d;
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
  box-shadow: var(--sh);
}
.admin-global-savebar strong {
  font-size: 14px;
}
.admin-global-savebar span {
  font-size: 12.5px;
  color: #166534;
  flex: 1;
}
.admin-global-savebar .admin-main-save {
  padding: 10px 18px;
}
@media (max-width: 760px) {
  .adm-header-save {
    top: 56px;
  }
  .adm-header-actions {
    width: 100%;
  }
  .admin-main-save {
    width: 100%;
  }
  .admin-global-savebar {
    top: 136px;
    flex-direction: column;
    align-items: stretch;
  }
}


/* ════════════════════════════════════════════════════════════════
   APP COLOR PROFILE 2026 – mer färg, mer sport, tydligare premium
   Läggs sist så det skriver över tidigare stil utan att röra funktion.
════════════════════════════════════════════════════════════════ */
:root{
  --navy:#061226;
  --navy-2:#0B1E3B;
  --navy-3:#12356A;
  --blue:#1557FF;
  --blue-2:#0047D9;
  --cyan:#00C2FF;
  --cyan-bg:#E8FAFF;
  --violet:#7C3AED;
  --violet-bg:#F3EAFF;
  --lime:#B7F000;
  --orange:#FF7A1A;
  --pink:#FF3D8B;
  --green:#16A34A;
  --bg:#ECF3FF;
  --surface:#FFFFFF;
  --s2:#F6F9FF;
  --s3:#E8F0FF;
  --line:#D6E3F7;
  --line2:#B7C8E8;
  --text:#061226;
  --muted:#52647E;
  --hint:#8DA1BD;
  --sh:0 8px 28px rgba(6,18,38,.08);
  --sh2:0 20px 70px rgba(6,18,38,.18);
}
html,body{
  background:
    radial-gradient(circle at 8% 0%, rgba(21,87,255,.14), transparent 30%),
    radial-gradient(circle at 94% 8%, rgba(0,194,255,.16), transparent 28%),
    linear-gradient(180deg,#F7FAFF 0%,#ECF3FF 46%,#F9FBFF 100%) !important;
}
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(21,87,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,87,255,.045) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 70%);
}
.topbar{
  background:rgba(255,255,255,.86) !important;
  border-bottom:1px solid rgba(21,87,255,.16) !important;
  box-shadow:0 10px 35px rgba(6,18,38,.08);
}
.topbar::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:-1px;height:3px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--lime),var(--orange),var(--pink));
}
.logo{height:42px}
.nav button.active,
.nav-home-btn:hover,
.nav button:hover{
  background:linear-gradient(135deg,rgba(21,87,255,.12),rgba(0,194,255,.12)) !important;
  color:var(--navy) !important;
}
.nav .nav-cta,.nav-right .nav-cta,.nav-register{
  border:0 !important;
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(21,87,255,.22);
}
.btn.primary,.btn.blue-btn,.hero-v2-primary,.cp-primary{
  border:0 !important;
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  color:#fff !important;
  box-shadow:0 12px 30px rgba(21,87,255,.25);
}
.btn.primary:hover,.btn.blue-btn:hover,.hero-v2-primary:hover,.cp-primary:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 40px rgba(21,87,255,.32);
}
.card,.soft-card,.intro-card,.feature-grid-v2 article,.audience-grid-v2 article,.price-grid-v2 article,.info-benefit-list article,.info-hero-card,.info-wide-card{
  border:1px solid rgba(21,87,255,.12) !important;
  box-shadow:var(--sh) !important;
}
.page-head{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,rgba(6,18,38,.98),rgba(18,53,106,.96) 52%,rgba(21,87,255,.92)) !important;
  color:#fff;
  border-radius:28px;
  padding:38px 40px !important;
  margin-bottom:28px;
  box-shadow:var(--sh2);
}
.page-head::before{
  content:"";
  position:absolute;
  inset:auto -8% -42% 42%;
  width:55%;
  height:140%;
  background:radial-gradient(circle,rgba(0,194,255,.34),transparent 58%);
}
.page-head::after{
  content:"";
  position:absolute;
  left:0;right:0;bottom:0;height:5px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--lime),var(--orange));
}
.page-head h1{color:#fff !important;font-size:clamp(26px,3.4vw,42px) !important}
.page-head p{color:rgba(255,255,255,.76) !important;max-width:780px}
.eyebrow{
  color:var(--blue) !important;
  background:linear-gradient(135deg,rgba(21,87,255,.12),rgba(0,194,255,.14));
  border:1px solid rgba(21,87,255,.14);
  padding:5px 10px;
  border-radius:999px;
}
.page-head .eyebrow,.dark-showcase-v2 .eyebrow,.hero-v2 .eyebrow{
  color:#CFF7FF !important;
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.18);
}

/* STARTSIDA */
.hero-v2{
  min-height:720px !important;
  background:#061226 !important;
}
.hero-v2::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(21,87,255,.18),transparent 35%),
    radial-gradient(circle at 82% 18%,rgba(183,240,0,.22),transparent 20%),
    radial-gradient(circle at 78% 78%,rgba(0,194,255,.24),transparent 24%);
  mix-blend-mode:screen;
}
.hero-v2-bg{opacity:.82 !important}
.hero-v2-bg img{filter:saturate(1.28) contrast(1.06) brightness(.94) !important}
.hero-v2-shade{
  background:
    linear-gradient(90deg,rgba(6,18,38,.98) 0%,rgba(6,18,38,.84) 38%,rgba(6,18,38,.38) 100%),
    radial-gradient(circle at 28% 38%,rgba(21,87,255,.34),transparent 34%) !important;
}
.hero-v2-grid{min-height:720px !important}
.hero-v2 h1{
  font-size:clamp(34px,4.4vw,58px) !important;
  line-height:.96 !important;
  text-shadow:0 18px 50px rgba(0,0,0,.28);
}
.hero-v2 h1::after{
  content:"";
  display:block;
  width:180px;
  height:8px;
  margin-top:22px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--lime));
}
.hero-v2-copy p{font-size:17px !important;color:rgba(255,255,255,.80) !important}
.hero-v2-kicker{
  background:linear-gradient(135deg,rgba(21,87,255,.35),rgba(0,194,255,.14)) !important;
  border-color:rgba(255,255,255,.22) !important;
}
.hero-v2-panel{
  background:linear-gradient(180deg,rgba(255,255,255,.19),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.35) !important;
}
.score-ring{
  background:
    radial-gradient(circle at center, rgba(255,255,255,.12) 0 48%, transparent 49%),
    conic-gradient(var(--lime) 0 42%, var(--cyan) 42% 80%, rgba(255,255,255,.16) 80% 100%) !important;
}
.metric-list i{
  background:linear-gradient(90deg,var(--lime),var(--cyan),var(--blue)) !important;
}
.hero-v2-points span{
  background:rgba(255,255,255,.11) !important;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  padding:7px 11px;
}
.sport-strip-v2{
  background:linear-gradient(90deg,var(--navy),var(--blue),var(--cyan)) !important;
  color:#fff !important;
  border:0 !important;
  box-shadow:var(--sh2);
}
.sport-strip-v2 b{
  background:rgba(255,255,255,.14) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.18);
}
.section-title-v2 h2,.intro-card h2,.dark-showcase-inner h2{
  color:var(--navy);
}
.intro-card.big{
  background:
    radial-gradient(circle at top right,rgba(0,194,255,.20),transparent 34%),
    linear-gradient(135deg,#FFFFFF,#F4F8FF) !important;
}
.intro-card.big::before{
  content:"";
  display:block;
  width:68px;height:6px;border-radius:999px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--lime));
  margin-bottom:16px;
}
.intro-card.photo div{
  background:linear-gradient(135deg,rgba(6,18,38,.92),rgba(21,87,255,.82)) !important;
}
.feature-grid-v2 article{
  position:relative;
  overflow:hidden;
  background:#fff !important;
}
.feature-grid-v2 article::before{
  content:"";
  position:absolute;inset:0 0 auto 0;height:5px;
  background:linear-gradient(90deg,var(--blue),var(--cyan),var(--lime));
}
.feature-grid-v2 article:nth-child(2)::before{background:linear-gradient(90deg,var(--cyan),var(--violet))}
.feature-grid-v2 article:nth-child(3)::before{background:linear-gradient(90deg,var(--lime),var(--green))}
.feature-grid-v2 article:nth-child(4)::before{background:linear-gradient(90deg,var(--orange),var(--pink))}
.feature-grid-v2 em{
  color:var(--blue) !important;
  background:var(--cyan-bg);
  border-radius:12px;
  padding:7px 10px;
}
.dark-showcase-v2{
  background:
    radial-gradient(circle at 8% 12%,rgba(0,194,255,.25),transparent 30%),
    radial-gradient(circle at 92% 82%,rgba(183,240,0,.18),transparent 25%),
    linear-gradient(135deg,#061226,#0B1E3B 58%,#12356A) !important;
}
.glass-stats div{
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.08)) !important;
  border:1px solid rgba(255,255,255,.18) !important;
}
.glass-stats strong{
  background:linear-gradient(90deg,var(--lime),var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent !important;
}
.audience-grid-v2 article span{
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  border-radius:18px;
  display:inline-flex;width:48px;height:48px;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(21,87,255,.22);
}
.price-grid-v2 article.featured{
  background:
    radial-gradient(circle at top right,rgba(183,240,0,.25),transparent 30%),
    linear-gradient(135deg,#061226,#12356A) !important;
  color:#fff;
}
.price-grid-v2 article.featured p,
.price-grid-v2 article.featured li{color:rgba(255,255,255,.75) !important}
.final-v2{
  background:
    radial-gradient(circle at 30% 0%,rgba(0,194,255,.22),transparent 32%),
    linear-gradient(135deg,var(--blue),var(--navy)) !important;
}

/* UNDERSIDOR / INFO */
.info-page-grid .card,.info-benefit-list article,.info-wide-card{
  overflow:hidden;
}
.info-benefit-list article b{
  background:linear-gradient(135deg,var(--blue),var(--cyan));
  color:#fff;
  border-radius:16px;
  width:46px;height:46px;
  display:inline-flex;align-items:center;justify-content:center;
  box-shadow:0 12px 26px rgba(21,87,255,.22);
}
.info-wide-card{
  background:
    radial-gradient(circle at top right,rgba(0,194,255,.16),transparent 32%),
    linear-gradient(135deg,#fff,#F3F8FF) !important;
}

/* TESTFLÖDE */
.to-tabs{
  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(21,87,255,.14) !important;
  box-shadow:var(--sh) !important;
}
.to-tab.active{
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  color:#fff !important;
}
.proto-toolbar,.pt-wrap,.panel,.adm-form-card{
  border:1px solid rgba(21,87,255,.14) !important;
  box-shadow:var(--sh) !important;
}
.proto-toolbar{
  background:
    radial-gradient(circle at top right,rgba(0,194,255,.14),transparent 28%),
    linear-gradient(135deg,#fff,#F6FAFF) !important;
}
.pt-table thead th{
  background:linear-gradient(135deg,var(--navy),var(--navy-3)) !important;
}
.pt-table thead th:nth-child(4n){
  border-top:3px solid var(--cyan);
}
.bar i,.pt-avg-fill,.res-bar i,.mini-bar i{
  background:linear-gradient(90deg,var(--orange),var(--lime),var(--cyan),var(--blue)) !important;
}

/* ADMIN */
.adm-tabs{
  background:rgba(255,255,255,.75) !important;
  border:1px solid rgba(21,87,255,.14) !important;
  box-shadow:var(--sh);
}
.adm-tab.active{
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  color:#fff !important;
}
.admin-main-save{
  background:linear-gradient(135deg,var(--green),var(--lime)) !important;
  color:#06210F !important;
  box-shadow:0 12px 30px rgba(22,163,74,.25) !important;
}
.admin-global-savebar{
  background:linear-gradient(135deg,#F0FDF4,#E8FAFF) !important;
  border:2px solid rgba(22,163,74,.25) !important;
}
.adm-sport-tile.active{
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
}
.admin-sidebar-modern,.admin-sidebar,.admin-edit-panel,.adm-edit,.adm-group{
  border-color:rgba(21,87,255,.14) !important;
}
.adm-savebar{
  background:linear-gradient(135deg,#FFFFFF,#ECFFF8) !important;
  border:2px solid rgba(22,163,74,.24) !important;
}

/* ACCESS / REGISTER */
.access-card,.reg-form-wrap{
  box-shadow:var(--sh2) !important;
}
.reg-left{
  background:
    radial-gradient(circle at 12% 18%,rgba(0,194,255,.24),transparent 28%),
    radial-gradient(circle at 92% 80%,rgba(183,240,0,.18),transparent 25%),
    linear-gradient(155deg,#061226 0%,#0B1E3B 54%,#1557FF 132%) !important;
}
.reg-perk-icon{
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
}
.reg-submit{
  background:linear-gradient(135deg,var(--blue),var(--cyan)) !important;
  border:0 !important;
  box-shadow:0 12px 30px rgba(21,87,255,.25);
}

@media(max-width:860px){
  .hero-v2{min-height:auto !important}
  .hero-v2-grid{min-height:auto !important;grid-template-columns:1fr !important;padding:64px 22px !important}
  .hero-v2-panel{max-width:460px}
  .page-head{padding:28px 22px !important;border-radius:20px}
}

/* APP link-fix: data-nav elements are now real links too */
.nav a {
  border: 0;
  background: transparent;
  color: var(--muted);
  padding: 7px 13px;
  border-radius: 9px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 13.5px;
  transition: .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav a:hover {
  background: var(--s3);
  color: var(--text);
}
.nav a.active {
  background: var(--blue-3);
  color: var(--navy);
}
.logo-btn {
  border: 0;
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
}
a.btn,
a.nav-register,
a.nav-cta,
a.nav-admin-btn,
a.nav-user,
a.nav-home-btn,
a.text-link {
  text-decoration: none;
  cursor: pointer;
}
a.nav-home-btn {
  display: flex;
}

/* ══════════════════════════════════════════════════════════
   LOGO – sammanhållen logostil
   logo--topbar : navbar, vit bakgrund, loggan syns som den är
   logo--white  : mörka ytor, inverteras till vitt
   logo--cta    : hero CTA-sektion
══════════════════════════════════════════════════════════ */

/* Topbar – loggan är mörk, funkar utmärkt på vit nav */
.logo--topbar {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
}

/* Mörka ytor – invertera till vitt, ingen bakgrund */
.logo--white {
  filter: brightness(0) invert(1);
  opacity: 0.90;
}

/* Footer */
.footer-logo {
  height: 32px;
  width: auto;
  display: block;
  margin-bottom: 14px;
}

/* Hero CTA */
.logo--cta {
  height: 48px;
  width: auto;
  display: block;
  margin: 0 auto 22px;
}

/* Registreringssida */
.reg-logo {
  height: 40px;
  width: auto;
  margin-bottom: 36px;
}

/* ── Logo på vita ytor – smälter in naturligt ── */
.logo {
  height: 38px;
  width: auto;
  object-fit: contain;
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.logo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}
.logo-access {
  height: 42px;
  width: auto;
  object-fit: contain;
  display: block;
  margin-bottom: 12px;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* ── Navbar logo – större och snyggare ── */
.logo {
  height: 48px !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}
.logo-btn {
  background: none !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  border-radius: 10px !important;
  transition: opacity .15s !important;
  margin-right: 8px !important;
}
.logo-btn:hover { opacity: 0.80 !important; }

/* Ta bort den separata hemknappen helt */
.nav-home-btn { display: none !important; }

/* ── Kontaktsida ── */
.contact-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: 12px;
  text-decoration: none;
  color: var(--text);
  transition: .15s;
}
.contact-row:hover {
  border-color: var(--blue-4);
  background: var(--blue-3);
  box-shadow: var(--sh);
}
.contact-icon {
  font-size: 22px;
  width: 44px;
  height: 44px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
  margin-bottom: 2px;
}
.contact-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

/* APP admin kravprofiler – driftförbättring */
.adm-profile-guide {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  color:#fff;
  border-radius:var(--rl);
  padding:16px 20px;
  margin-bottom:14px;
  box-shadow:var(--sh2);
}
.adm-profile-guide strong { display:block; font-size:16px; margin-bottom:2px; }
.adm-profile-guide span:not(.pill) { color:rgba(255,255,255,.78); font-size:13px; }
.adm-profile-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  padding:14px 22px 0;
}
.adm-profile-stats div {
  background:var(--s2);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px 12px;
}
.adm-profile-stats small { display:block; color:var(--muted); font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-weight:700; }
.adm-profile-stats strong { display:block; color:var(--navy); font-size:20px; line-height:1.1; margin-top:3px; }
.adm-sync-note {
  margin:0 22px 12px;
  padding:10px 12px;
  border:1px solid var(--blue-4);
  background:var(--blue-3);
  border-radius:12px;
  color:var(--navy);
  font-size:12.5px;
}
.adm-item-actions { display:flex; gap:5px; justify-content:flex-end; }
.adm-items-head, .adm-item-row { grid-template-columns: 1.7fr .9fr 1.25fr .8fr .8fr 1fr 1.15fr; }
@media (max-width: 1000px) {
  .adm-items-head, .adm-item-row { grid-template-columns: 1.5fr .8fr 1fr .7fr .7fr .9fr 1.1fr; }
}
@media (max-width: 760px) {
  .adm-profile-guide { align-items:flex-start; flex-direction:column; }
  .adm-profile-stats { grid-template-columns:1fr; }
  .adm-items-head, .adm-item-row { grid-template-columns: 1fr; }
  .adm-item-actions { justify-content:flex-start; }
}

/* ─────────────────────────────────────────────────────────
   Admin kravprofiler: idrottskort och renare arbetsyta
────────────────────────────────────────────────────────── */
.admin-sport-search{margin:14px 0 18px;max-width:560px}
.admin-sport-overview{background:var(--surface);border:1px solid var(--line);border-radius:var(--rxl);box-shadow:var(--sh);padding:22px}
.admin-overview-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px}
.admin-overview-head h2,.admin-sport-detail-head h2{font-size:32px;margin:5px 0 6px;color:var(--navy)}
.admin-overview-head p,.admin-sport-detail-head p{color:var(--muted);max-width:720px}
.admin-sport-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.admin-sport-card{display:flex;align-items:center;gap:14px;text-align:left;border:1px solid var(--line);background:linear-gradient(135deg,#fff 0%,var(--s2) 100%);border-radius:20px;padding:18px;min-height:128px;box-shadow:var(--sh);transition:.18s ease;color:var(--text);width:100%}
.admin-sport-card:hover{transform:translateY(-2px);border-color:var(--blue-4);box-shadow:var(--sh2);background:#fff}
.sport-card-icon{width:58px;height:58px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:var(--navy);color:#fff;font-size:30px;flex:0 0 auto;box-shadow:0 12px 30px rgba(10,22,40,.18)}
.sport-card-main{display:grid;gap:3px;min-width:0;flex:1}
.sport-card-main strong{font-size:19px;font-weight:800;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sport-card-main em{font-style:normal;font-size:12.5px;font-weight:700;color:var(--blue)}
.sport-card-main small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sport-card-arrow{font-size:32px;line-height:1;color:var(--blue);opacity:.65}
.admin-sport-detail-head{display:flex;align-items:center;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--rxl);box-shadow:var(--sh);padding:18px 20px;margin-bottom:16px}
.admin-profile-workspace{display:grid;grid-template-columns:minmax(250px,340px) 1fr;gap:16px;align-items:start}
.admin-profile-picker{position:sticky;top:84px;max-height:calc(100vh - 104px);overflow:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--rxl);box-shadow:var(--sh);padding:12px}
.admin-profile-card-grid{display:grid;gap:10px}
.admin-profile-card{display:grid;gap:7px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:16px;padding:14px;transition:.15s;color:var(--text);width:100%}
.admin-profile-card:hover{border-color:var(--blue-4);background:var(--blue-3)}
.admin-profile-card.active{border-color:var(--blue);box-shadow:0 0 0 3px rgba(24,85,244,.10);background:#fff}
.admin-profile-card.hidden-profile{opacity:.72}
.profile-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}
.profile-mini-icon{width:32px;height:32px;border-radius:11px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px}
.admin-profile-card strong{font-size:15px;color:var(--navy);line-height:1.2}
.admin-profile-card em{font-style:normal;color:var(--blue);font-weight:700;font-size:12px}
.admin-profile-card small{color:var(--muted);font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (max-width:900px){.admin-profile-workspace{grid-template-columns:1fr}.admin-profile-picker{position:static;max-height:none}.admin-sport-detail-head{align-items:flex-start;flex-direction:column}.admin-overview-head h2,.admin-sport-detail-head h2{font-size:26px}}

/* Admin kravprofiler – kompakt idrottsstruktur */
.admin-sport-strip-head{
  display:flex;align-items:stretch;justify-content:space-between;gap:14px;margin:18px 0 10px;
}
.admin-sport-all{
  min-width:160px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 16px;box-shadow:var(--sh);
  display:grid;gap:4px;color:var(--text);
}
.admin-sport-all.active{background:#fff;border-color:var(--blue-4)}
.admin-sport-all strong{font-size:15px;color:var(--text)}
.admin-sport-all span,.admin-sport-all small{font-size:12px;color:var(--muted)}
.admin-sport-strip{
  display:flex;gap:12px;overflow-x:auto;padding:10px 2px 14px;scrollbar-width:thin;border-bottom:1px solid var(--line);
}
.admin-sport-tile{
  min-width:156px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--sh);
  display:flex;align-items:center;gap:11px;text-align:left;transition:.15s ease;color:var(--text);
}
.admin-sport-tile:hover{transform:translateY(-1px);border-color:var(--blue);box-shadow:var(--sh2)}
.admin-sport-tile:first-child,.admin-sport-tile.is-active{background:linear-gradient(135deg,var(--blue),#06a9f4);color:#fff;border-color:var(--blue)}
.admin-sport-tile:first-child em,.admin-sport-tile:first-child small,.admin-sport-tile.is-active em,.admin-sport-tile.is-active small{color:rgba(255,255,255,.82)}
.sport-tile-icon{width:34px;height:34px;border-radius:11px;background:var(--blue-3);display:flex;align-items:center;justify-content:center;font-size:18px;flex:0 0 auto}
.admin-sport-tile:first-child .sport-tile-icon,.admin-sport-tile.is-active .sport-tile-icon{background:rgba(255,255,255,.18)}
.sport-tile-text{display:grid;gap:1px;line-height:1.2}
.sport-tile-text strong{font-size:15px;font-weight:800}
.sport-tile-text em,.sport-tile-text small{font-style:normal;font-size:12px;color:var(--muted)}
.admin-all-profiles{display:grid;gap:14px;margin-top:18px}
.admin-sport-section{background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px;box-shadow:var(--sh)}
.admin-section-title{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.admin-section-title h3{font-size:20px;margin-right:auto;color:var(--navy)}
.admin-section-title span{font-size:20px}
.admin-profile-row{display:flex;gap:9px;flex-wrap:wrap}
.admin-profile-chip{background:var(--s2);border:1px solid var(--line);border-radius:13px;padding:10px 12px;min-width:145px;text-align:left;display:grid;gap:2px;transition:.15s;color:var(--text)}
.admin-profile-chip:hover{background:var(--blue-3);border-color:var(--blue-4)}
.admin-profile-chip strong{font-size:13px;font-weight:800}
.admin-profile-chip small{font-size:11.5px;color:var(--muted)}
.admin-profile-chip.more{justify-content:center;text-align:center;color:var(--blue);font-weight:800}
@media(max-width:700px){.admin-sport-strip-head{flex-direction:column}.admin-sport-tile{min-width:148px}.admin-profile-chip{min-width:100%}}

/* Admin kravprofiler – ren idrottsstruktur enligt önskad vy */
.admin-pg .adm-profile-guide{margin-bottom:16px}
.admin-pg .adm-prof-bar{margin-bottom:12px}
.admin-sport-search{margin:12px 0 10px;max-width:560px}
.admin-sport-strip-head{
  display:flex;
  align-items:stretch;
  justify-content:space-between;
  gap:14px;
  margin:14px 0 8px;
}
.admin-sport-head-left{display:flex;gap:12px;align-items:stretch}
.admin-sport-all-tile{
  width:160px;
  min-width:160px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px 16px;
  box-shadow:var(--sh);
  display:grid;
  gap:3px;
  text-align:left;
  color:var(--text);
}
.admin-sport-all-tile.active,
.admin-sport-all-tile:hover{
  border-color:var(--blue-4);
  background:var(--blue-3);
}
.admin-sport-all-tile strong{font-size:15px;color:var(--text)}
.admin-sport-all-tile span,.admin-sport-all-tile small{font-size:12px;color:var(--muted)}
.admin-sport-strip{
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:10px 2px 16px;
  scrollbar-width:thin;
  border-bottom:1px solid var(--line);
}
.admin-sport-strip .admin-sport-card.admin-sport-tile{
  min-width:158px;
  min-height:80px;
  height:80px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  padding:13px 15px;
  box-shadow:var(--sh);
  display:flex;
  align-items:center;
  gap:11px;
  text-align:left;
  transition:.15s ease;
  color:var(--text);
}
.admin-sport-strip .admin-sport-card.admin-sport-tile:hover{
  transform:translateY(-1px);
  border-color:var(--blue);
  box-shadow:var(--sh2);
}
.admin-sport-strip .admin-sport-card.admin-sport-tile.is-active{
  background:linear-gradient(135deg,var(--blue),#06a9f4);
  color:#fff;
  border-color:var(--blue);
}
.admin-sport-strip .admin-sport-card.admin-sport-tile.is-active em,
.admin-sport-strip .admin-sport-card.admin-sport-tile.is-active small{color:rgba(255,255,255,.84)}
.admin-sport-strip .admin-sport-card.admin-sport-tile.is-active .sport-tile-icon{background:rgba(255,255,255,.18)}
.admin-current-sport{
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh);
  padding:18px 20px;
  margin:18px 0 14px;
}
.admin-current-sport h2{font-size:28px;margin:4px 0 5px;color:var(--navy)}
.admin-current-sport p{color:var(--muted);max-width:780px}
.clean-admin-profiles.admin-profile-workspace{
  display:grid;
  grid-template-columns:minmax(260px,360px) 1fr;
  gap:18px;
  align-items:start;
}
.clean-admin-profiles .admin-profile-picker{
  position:sticky;
  top:86px;
  max-height:calc(100vh - 110px);
  overflow:auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:18px;
  box-shadow:var(--sh);
  padding:12px;
}
.clean-admin-profiles .admin-profile-card-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
.clean-admin-profiles .admin-profile-card{
  min-height:auto;
  padding:13px;
  border-radius:14px;
}
.clean-admin-profiles .admin-edit-panel{
  min-width:0;
}
@media(max-width:900px){
  .clean-admin-profiles.admin-profile-workspace{grid-template-columns:1fr}
  .clean-admin-profiles .admin-profile-picker{position:static;max-height:none}
  .admin-current-sport h2{font-size:24px}
}
@media(max-width:700px){
  .admin-sport-strip-head{flex-direction:column}
  .admin-sport-all-tile{width:100%;min-width:100%}
  .admin-sport-strip .admin-sport-card.admin-sport-tile{min-width:150px}
}


/* APP update: renare och snyggare protokollram */
.to-hint { display: none !important; }
.proto-toolbar {
  border-radius: 18px;
  border: 1px solid rgba(24,85,244,.16);
  background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(238,242,255,.78));
  box-shadow: 0 10px 28px rgba(10,22,40,.07);
}
.pt-wrap {
  position: relative;
  border: 1px solid rgba(24,85,244,.18);
  border-radius: 20px;
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  box-shadow: 0 16px 42px rgba(10,22,40,.10), 0 1px 0 rgba(255,255,255,.9) inset;
}
.pt-wrap::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), inset 0 0 0 1px rgba(255,255,255,.55);
  z-index: 4;
}
.pt-scroll {
  border-radius: 20px;
}
.pt-table thead th {
  background: linear-gradient(180deg, #0d2a56, #071a37) !important;
  color: rgba(255,255,255,.88);
  border-right: 1px solid rgba(255,255,255,.10);
}
thead .pt-sticky {
  background: linear-gradient(180deg, #0d2a56, #071a37) !important;
}
.pt-table td {
  border-bottom: 1px solid #dbe6f6;
  border-right: 1px solid #e3ebf7;
}
.pt-row:hover td {
  background: #f7fbff;
}
.pt-row:hover td.pt-sticky {
  background: #eef7ff;
}
.pt-res-input {
  border-radius: 999px;
  min-height: 34px;
  box-shadow: inset 0 1px 2px rgba(10,22,40,.04);
}
.pt-res-filled {
  border-color: #86efac;
  background: #effdf5;
}
.pt-score {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.72);
}
.pt-add-row td {
  background: linear-gradient(180deg, #f5f8ff, #edf3fc) !important;
}

/* APP update: jämnare protokolltabell – fasta kolumner och rak rubrikrad */
.to-hint {
  display: none !important;
}

.pt-wrap {
  position: relative !important;
  border: 1px solid rgba(24,85,244,.16) !important;
  border-radius: 20px !important;
  background: #fff !important;
  box-shadow: 0 14px 36px rgba(10,22,40,.10), 0 1px 0 rgba(255,255,255,.9) inset !important;
  overflow: hidden !important;
}

.pt-wrap::before {
  content: none !important;
}

.pt-scroll {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: calc(100vh - 280px) !important;
  border-radius: 20px !important;
}

.pt-table {
  width: max-content !important;
  min-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  background: #fff !important;
}

.pt-table thead th {
  height: 54px !important;
  padding: 10px 8px !important;
  vertical-align: middle !important;
  background: linear-gradient(180deg, #0d2a56, #071a37) !important;
  color: rgba(255,255,255,.9) !important;
  border-top: 0 !important;
  border-right: 1px solid rgba(255,255,255,.10) !important;
  border-bottom: 0 !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.pt-table thead th:nth-child(4n) {
  border-top: 0 !important;
}

.pt-table thead th:first-child {
  border-top-left-radius: 20px !important;
}

.pt-table thead th:last-child {
  border-top-right-radius: 20px !important;
}

.pt-num,
.pt-num-cell {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  text-align: center !important;
}

.pt-name {
  width: 180px !important;
  min-width: 180px !important;
  max-width: 180px !important;
  text-align: left !important;
}

.pt-meta,
.pt-meta-cell {
  width: 72px !important;
  min-width: 72px !important;
  max-width: 72px !important;
  text-align: center !important;
}

.pt-test,
.pt-res-cell {
  width: 112px !important;
  min-width: 112px !important;
  max-width: 112px !important;
  text-align: center !important;
}

.pt-avg-hdr,
.pt-avg-cell {
  width: 80px !important;
  min-width: 80px !important;
  max-width: 80px !important;
  text-align: center !important;
}

.pt-del-hdr,
.pt-del-cell {
  width: 42px !important;
  min-width: 42px !important;
  max-width: 42px !important;
  text-align: center !important;
}

.pt-test-name {
  display: block !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: .04em !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  max-width: 96px !important;
  margin: 0 auto !important;
}

.pt-test-unit {
  display: block !important;
  font-size: 8.5px !important;
  font-weight: 500 !important;
  opacity: .58 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  margin-top: 3px !important;
  line-height: 1.05 !important;
  white-space: normal !important;
}

.pt-table td {
  height: 66px !important;
  padding: 6px 6px !important;
  vertical-align: middle !important;
  border-bottom: 1px solid #dbe6f6 !important;
  border-right: 1px solid #e3ebf7 !important;
  background: #fff !important;
}

.pt-row:hover td {
  background: #f7fbff !important;
}

.pt-num,
.pt-num-cell {
  position: sticky !important;
  left: 0 !important;
  z-index: 4 !important;
  background: #fff !important;
}

.pt-table thead .pt-num {
  z-index: 7 !important;
  background: linear-gradient(180deg, #0d2a56, #071a37) !important;
  color: rgba(255,255,255,.9) !important;
}

.pt-name.pt-sticky {
  position: sticky !important;
  left: 42px !important;
  z-index: 4 !important;
  background: #f7fbff !important;
  border-right: 2px solid #c7d4fd !important;
}

thead .pt-name.pt-sticky {
  z-index: 7 !important;
  background: linear-gradient(180deg, #0d2a56, #071a37) !important;
  color: #fff !important;
}

.pt-row.pt-named td.pt-sticky {
  background: #eef7ff !important;
}

.pt-row:hover td.pt-sticky,
.pt-row:hover .pt-num-cell {
  background: #eef7ff !important;
}

.pt-name-input {
  min-height: 34px !important;
  padding: 6px 8px !important;
}

.pt-meta-input {
  width: 54px !important;
  min-height: 34px !important;
  padding: 6px 4px !important;
}

.pt-res-inner {
  min-height: 50px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
}

.pt-res-input {
  width: 76px !important;
  min-height: 34px !important;
  border-radius: 999px !important;
  padding: 6px 8px !important;
  box-shadow: inset 0 1px 2px rgba(10,22,40,.04) !important;
}

.pt-res-filled {
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}

.pt-score {
  display: block !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  font-size: 16px !important;
  line-height: 1 !important;
}

.pt-mini-bar,
.pt-avg-bar {
  display: none !important;
}

.pt-avg-num {
  font-size: 20px !important;
}

.pt-add-row td {
  height: 54px !important;
  background: linear-gradient(180deg, #f5f8ff, #edf3fc) !important;
  border-top: 1px solid #c7d4fd !important;
}



/* APP – längd för Aerob arbetskapacitet */
.pt-meta,
.pt-meta-cell {
  min-width: 86px;
}


/* APP – Aerob arbetskapacitet */
.pt-meta,
.pt-meta-cell {
  min-width: 86px;
}


.aerob-helper-note{
  margin: 0 0 14px;
  background: var(--blue-3);
  border: 1px solid var(--blue-4);
  color: var(--navy);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 13px;
}
.aerob-helper-note strong{font-weight:800;}


/* Fix: längd/vikt ska vara lätt att skriva i protokollet */
.pt-meta,
.pt-meta-cell {
  min-width: 96px;
}
.pt-meta-input {
  min-width: 72px;
  pointer-events: auto;
  user-select: text;
}


/* Fix: längd/vikt + konditionskapacitet */
.pt-meta,
.pt-meta-cell {
  min-width: 96px;
}
.pt-meta-input {
  min-width: 72px;
  pointer-events: auto;
  user-select: text;
}
.aerob-helper-note{
  margin:0 0 14px;background:var(--blue-3);border:1px solid var(--blue-4);
  color:var(--navy);border-radius:14px;padding:12px 14px;font-size:13px;
}
.aerob-helper-note strong{font-weight:800;}


/* Historik / sparade testomgångar */
.history-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--rxl);
  padding: 22px;
  box-shadow: var(--sh);
}
.history-panel.empty {
  text-align: center;
  padding: 42px 22px;
}
.history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 18px;
}
.history-head h2,
.history-card h3 {
  margin: 0;
}
.history-head p,
.history-card p,
.history-card small {
  color: var(--muted);
}
.history-list {
  display: grid;
  gap: 12px;
}
.history-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  background: var(--s2);
  border: 1px solid var(--line);
  border-radius: var(--rl);
  padding: 16px;
}
.history-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 760px) {
  .history-head,
  .history-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .history-actions {
    justify-content: flex-start;
  }
}