:root {
  /* --- v2 designtokens --- */
  --bg: oklch(0.985 0.004 90);       /* Lin — bakgrund */
  --surface: oklch(1 0 0);            /* Papper — ytor/kort */
  --ink: oklch(0.24 0.02 260);        /* Kol — text, primär */
  --ink-soft: oklch(0.52 0.014 260);  /* Kol, mjuk — sekundär text */
  --ink-faint: oklch(0.68 0.01 260);  /* Kol, svag — tertiär/metadata */

  --primary: oklch(0.54 0.09 42);     /* Lera — enda handlingsfärgen */
  --primary-dark: oklch(0.4 0.09 42); /* Lera, mörk — hover/aktiv */
  --primary-soft: oklch(0.955 0.025 45); /* Lera, mjuk — tonad yta */

  --accent-dark: oklch(0.5 0.06 150);    /* Mossa — enbart bekräftat/betrott */
  --accent-soft: oklch(0.95 0.025 150);  /* Mossa, mjuk */

  --hairline: oklch(0.9 0.007 250);

  /* Radie- och spacingskala (nya, används successivt när vi går igenom fler sidor) */
  --r-sm: 12px;
  --r-md: 20px;
  --r-lg: 28px;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  --sh-float: 0 12px 28px -12px oklch(0.24 0.02 260 / 0.18);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  font-family: "Public Sans", system-ui, sans-serif;
  color: var(--ink);
  display: flex;
  justify-content: center;
  padding: 32px 16px;
}

.card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: 24px;
  box-shadow: 0 20px 50px -20px rgba(20, 20, 40, 0.12);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

h1 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 22px;
  font-weight: 700;
  margin: 0;
}

.user-badge {
  font-size: 12px;
  color: var(--ink-soft);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.chip.selected {
  background: var(--primary-soft);
  color: var(--primary-dark);
  font-weight: 600;
}

form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.klinch-frame {
  display: none;
  flex-direction: column;
  gap: 16px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 20px;
}

.klinch-frame.visible {
  display: flex;
}

.klinch-frame.animate-in {
  animation: klinchInGlid 0.35s ease both;
}

.falt-kopiera-lank {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: 2px;
}

/* Fält + skicka-knappen dras ihop och försvinner ur klinch-rutan när
   Klinchen skickats, så bara kvittot (samma ram/färg som innan) blir kvar. */
.falt-wrap-krymper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: hidden;
  opacity: 1;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}

.kvitto-innehall {
  padding-top: 2px;
}

/* Divider + delningsikoner + länk som glider ner uppifrån, ovanför
   klinch-rutan (som nu bara innehåller kvittot). */
.dela-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 20px;
  opacity: 0;
  transform: translateY(-18px);
}

.dela-panel[hidden] {
  display: none;
}

.dela-rubrik {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  text-align: center;
  margin: 0;
}

.dela-panel.animate-in {
  animation: glidInOvanifran 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.divider-center {
  width: 120px;
  height: 1px;
  background: var(--hairline);
  margin: 0 auto;
}

.dela-ikonrad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.dela-ikon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-soft);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.dela-ikon-btn:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* Synlig bekräftelse på "Kopiera länk" - en title-tooltip syns ju bara vid
   hover, vilket inte finns på mobil, så färg + ikonbyte är det som faktiskt
   märks. */
.dela-ikon-btn.kopierad {
  border-color: var(--accent-dark);
  background: var(--accent-soft);
  color: var(--accent-dark);
}

/* När hela raden runt knappen också blir grön - låt knappen sticka ut
   vit mot den ramen istället för att smälta in i samma toning. */
.dela-lank-rad.kopierad .dela-ikon-btn.kopierad {
  background: var(--surface);
}

.dela-lank-rad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 10px 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}

.dela-lank-rad.kopierad {
  background: var(--accent-soft);
  border-color: var(--accent-dark);
}

.dela-lank-text {
  font-size: 12px;
  color: var(--ink-soft);
  margin: 0;
  word-break: break-all;
}

.dela-lank-rad .dela-ikon-btn {
  width: 32px;
  height: 32px;
}

.dela-lank-rad .dela-ikon-btn svg {
  width: 16px;
  height: 16px;
}

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

/* Granska-sidans redigera-formulär (mitt förslag) - samma yta/animation
   som klinch-frame, men alltid synligt när den inte är dold via JS. */
#redigeraForm {
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#redigeraForm[hidden] {
  display: none;
}

#redigeraForm.animate-in {
  animation: klinchInGlid 0.35s ease both;
}

.redigera-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.redigera-actions .btn-primary {
  width: 100%;
}

/* Fält-nivå-diff mellan mitt och motpartens förslag (se renderJamforelse
   i app.js) - en tonad vänsterkant räcker för att peka ut vad som skiljer. */
.skiljer-sig {
  border-left: 3px solid var(--primary);
  padding-left: 8px;
  margin-left: -11px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: left;
}

label[hidden] {
  display: none;
}

.deal-subtitle {
  font-size: 12px;
  color: var(--ink-soft);
  font-weight: 600;
  text-align: left;
  margin: 0;
}

input,
textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--ink);
  border: none;
  border-bottom: 1px solid var(--hairline);
  padding: 8px 0;
  background: transparent;
  text-align: left;
}

.datetime-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding-top: 4px;
}

.datetime-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.datetime-frame {
  border: 1px solid var(--hairline);
  border-radius: 10px;
  padding: 6px 16px;
}

.reel-sep {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  color: var(--ink-soft);
}

.reel {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.reel-window {
  position: absolute;
  top: 9px;
  left: 0;
  right: 0;
  height: 36px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
  pointer-events: none;
}

.reel-track {
  height: 54px;
  width: 46px;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
  perspective: 220px;
}

.reel-track-datum {
  width: 68px;
}

.reel-track.dragging {
  cursor: grabbing;
  scroll-snap-type: none;
}

.reel-track::-webkit-scrollbar {
  display: none;
}

.reel-pad {
  height: 36px;
  scroll-snap-align: center;
}

.reel-option {
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  scroll-snap-align: center;
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 13px;
  color: var(--ink-soft);
  opacity: 0.4;
  white-space: nowrap;
}

.reel-option.selected {
  color: var(--ink);
  font-weight: 700;
  font-size: 16px;
  opacity: 1;
}

input:focus,
textarea:focus {
  outline: none;
  border-bottom-color: var(--primary);
}

textarea {
  resize: vertical;
  min-height: 60px;
  font-family: inherit;
}

.btn-primary {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--sh-float);
}

.btn-primary:hover {
  background: var(--primary-dark);
}

.btn-outline {
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 10px 20px;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}

.link-button {
  border: none;
  background: none;
  color: var(--ink-soft);
  font-size: 12px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  align-self: center;
  padding: 0;
}

.link-button:hover {
  color: var(--primary);
}

.form-error {
  color: #cc3333;
  font-size: 12px;
  margin: 0;
}

.proposal {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.proposal[hidden] {
  display: none;
}

.proposal-label {
  font-size: 12px;
  color: var(--ink-soft);
  padding-left: 4px;
  font-weight: 600;
}

/* Visar skaparen om motparten har öppnat länken än eller inte, medan man
   väntar på ett första svar. */
.lank-status {
  font-size: 11px;
  color: var(--ink-faint);
  font-weight: 600;
}

.lank-status.oppnad {
  color: var(--accent-dark);
}

.proposal-box {
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 16px 18px;
  position: relative;
}

/* "Kvitto"-stil: vitt istället för tonat, en tydligare ram än appens
   övriga (tunna, ljusgrå) ramar eftersom det här är själva
   överenskommelsen - den ska synas och kännas beständig genom hela
   flödet (granska-sidan, och slutgiltigt på bekräftelse-sidan). */
.proposal-box.proposal-tint {
  background: var(--surface);
  border: 1.5px solid var(--primary);
  box-shadow: var(--sh-float);
}

.proposal-tint .proposal-title {
  text-align: center;
}

.proposal-tint .proposal-meta,
.proposal-tint .proposal-rad {
  border-top: 1px dashed var(--hairline);
  padding-top: 6px;
  margin-top: 6px;
}

.proposal-tint .proposal-villkor {
  border-top: 1px dashed var(--hairline);
  padding-top: 8px;
  margin-top: 8px;
}

.proposal-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
}

.proposal-meta {
  font-size: 13px;
  margin-top: 4px;
}

.proposal-rad {
  font-size: 13px;
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  gap: 6px;
}

.proposal-rad-label {
  color: var(--ink-soft);
  font-weight: 600;
}

.proposal-villkor {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 8px;
  line-height: 1.5;
}

.handshake-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}

.ring-btn {
  position: relative;
  z-index: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--primary);
  border: none;
  box-shadow: var(--sh-float);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.ring-btn:hover {
  background: var(--primary-dark);
}

/* Pulserande ring bakom handslaget – signalerar "redo att klincha" innan man trycker */
.ring-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  z-index: -1;
  pointer-events: none;
  animation: pulse 1.8s ease-out infinite;
}

.ring-btn:disabled::before {
  animation-play-state: paused;
  opacity: 0;
}

.hint {
  font-size: 11px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
}

@keyframes klinchPulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.ring-btn.klinchar {
  animation: klinchPulse 0.4s ease-in-out 2;
}

.klinch-moment {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--primary-dark);
  text-align: center;
  margin: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.klinch-moment.visible {
  opacity: 1;
}

.hint-faint {
  font-size: 11px;
  color: var(--ink-soft);
  opacity: 0.7;
  text-align: center;
  margin: 0;
}

.hint-faint a {
  color: inherit;
}

.footnote {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
}

/* Hem / navigering */

.back-link {
  font-size: 12px;
  color: var(--ink-soft);
  text-decoration: none;
}

.back-link:hover {
  color: var(--primary);
}

.back-link.center {
  align-self: center;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.hem-card {
  min-height: calc(100vh - 64px);
}

.hem-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-top: -40px;
}

.home-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: opacity 0.35s ease;
}

.home-greeting {
  font-size: 23px;
  opacity: 0;
}

.home-greeting.animate-in {
  animation: glidInOvanifran 0.8s ease-out forwards;
}

@keyframes glidInOvanifran {
  from {
    opacity: 0;
    transform: translateY(-18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#nyKlinchBtn {
  margin: 0 36px;
  opacity: 0;
  animation: welcomeGlidUpp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

#nyKlinchBtn.fade-out {
  animation: smygBort 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

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

/* Ny Klinch-panelen på hem.html - kategorival + formulär, allt utan
   sidbyte. Smyger mjukt fram underifrån när "Ny Klinch" klickas. */
.nyklinch-panel {
  display: none;
  flex-direction: column;
  gap: 4px;
}

.nyklinch-panel.visible {
  display: flex;
}

.nyklinch-panel.animate-in {
  animation: smygIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.nyklinch-prompt {
  opacity: 0;
  transition: opacity 0.35s ease;
  margin-bottom: 12px;
}

.nyklinch-prompt.visible {
  opacity: 1;
}

.nyklinch-prompt h2 {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 23px;
  font-weight: 700;
  color: var(--ink);
  margin: 0;
  letter-spacing: 0.02em;
  text-align: center;
}

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

.kategori-stack {
  display: flex;
  flex-direction: column;
}

/* Knapparna börjar dolda och är inte synliga */
.chip-primar {
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 16px;
  margin-bottom: 12px;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-shadow: var(--sh-float);
  max-height: 64px;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition:
    opacity 0.28s cubic-bezier(0.4, 0, 1, 1),
    transform 0.28s cubic-bezier(0.4, 0, 1, 1),
    max-height 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    margin-bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    padding-top 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s,
    padding-bottom 0.4s cubic-bezier(0.22, 1, 0.36, 1) 0.08s;
}

/* När panelen animerar in, glider knapparna upp från under */
.nyklinch-panel.animate-in .chip-primar {
  animation: chipGlidIn 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

@keyframes chipGlidIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chip-primar:hover {
  background: var(--primary-dark);
}

.chip-primar.selected {
  background: var(--primary-dark);
  color: #fff;
}

/* Hem-sidans inline-flöde: de ovalda knapparna glider åt sidan och
   tonar bort FÖRST, sen fälls utrymmet ihop en aning efter - så det
   känns som att de sveps undan istället för att klämmas ihop. Den
   valda hamnar högst upp, ungefär där "Ny Klinch" satt. */
.chip-primar.dold {
  opacity: 0;
  max-height: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateX(-28px);
  pointer-events: none;
}

.home-header.dold {
  opacity: 0;
}

.wordmark {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: var(--ink);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wordmark-mark {
  width: 22px;
  height: 22px;
}

.mini-wordmark {
  align-self: center;
  font-size: 17px;
  gap: 7px;
  opacity: 0;
  animation: welcomeGlidUpp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.mini-wordmark .wordmark-mark {
  width: 19px;
  height: 19px;
}

/* Skapa konto-sidan (skapa-konto.html) */

.konto-card {
  position: relative;
  min-height: calc(100vh - 64px);
}

.konto-back {
  position: absolute;
  top: 26px;
  left: 22px;
  display: flex;
  color: var(--ink-faint);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.konto-back:hover {
  opacity: 0.9;
}

.konto-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 100%;
  opacity: 0;
  animation: welcomeGlidUpp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

.konto-center form {
  width: 100%;
}

.konto-divider {
  width: 240px;
  height: 1px;
  background: var(--hairline);
}

.konto-card .btn-primary,
.konto-card .btn-outline {
  align-self: center;
  width: 240px;
  height: 42px;
  padding: 0 20px;
}

.konto-card .btn-outline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

#demoBtn {
  border: 1.5px solid var(--primary);
  color: var(--primary-dark);
}

.demo-hint {
  width: 240px;
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-soft);
  background: linear-gradient(100deg, var(--ink-faint) 30%, var(--primary) 50%, var(--ink-faint) 70%);
  background-size: 220% auto;
  background-position: 0% center;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: demoSkimmer 3.5s linear infinite;
}

@keyframes demoSkimmer {
  to { background-position: -220% center; }
}

.konto-falt {
  display: none;
  flex-direction: column;
  gap: 16px;
}

.konto-falt.visible {
  display: flex;
}

.konto-falt.animate-in {
  animation: klinchInGlid 0.35s ease both;
}

/* Välkomstsidan (index.html) */

.welcome-card {
  min-height: calc(100vh - 64px);
}

.welcome-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.welcome-bottom {
  display: flex;
  flex-direction: column;
  gap: 20px;
  opacity: 0;
  animation: welcomeGlidUpp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.5s forwards;
}

.welcome-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transform: translateY(-28px);
}

.wordmark-hero {
  font-size: 40px;
  gap: 14px;
  opacity: 0;
  animation: welcomeGlidUpp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

.wordmark-hero .wordmark-mark {
  width: 44px;
  height: 44px;
}

.welcome-tagline {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
  margin: 0;
  opacity: 0;
  animation: welcomeGlidUpp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
}

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

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--primary-soft);
  color: var(--primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

/* Samma svaga, diskreta stil som bakåtpilen på skapa-konto.html
   (.konto-back) - ingen cirkel/bakgrund, bara en tonad ikon. */
.hem-back {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  color: var(--ink-faint);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.hem-back:hover {
  opacity: 0.9;
}

.avatar.large {
  width: 72px;
  height: 72px;
  font-size: 26px;
}

.avatar.medium {
  width: 52px;
  height: 52px;
  font-size: 19px;
}

.section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-label {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
}

.list-row {
  border-radius: var(--r-md);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid var(--hairline);
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.history-row {
  border: none;
  border-bottom: 1px solid var(--hairline);
  border-radius: 0;
  padding: 14px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.history-row-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.history-row.klickbar {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.history-row.klickbar:hover {
  opacity: 0.7;
}

.history-row.tas-bort {
  animation: klaraTasBort 0.4s ease forwards;
  pointer-events: none;
}

.list-row.tint {
  background: var(--primary-soft);
  border: none;
}

.row-avatars {
  position: relative;
  width: 46px;
  height: 28px;
  flex-shrink: 0;
}

.row-avatar {
  position: absolute;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--primary-soft);
  background: var(--surface);
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 11px;
}

.row-avatar.me {
  left: 0;
  color: var(--primary-dark);
}

.row-avatar.them {
  left: 16px;
}

@keyframes klaraTasBort {
  0% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(36px) scale(0.92); }
}

.row-badge {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}

.row-title {
  flex: 1;
  min-width: 0;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-meta {
  text-align: right;
  font-size: 11px;
  color: var(--ink-soft);
  line-height: 1.4;
  flex-shrink: 0;
}

.history-list {
  display: flex;
  flex-direction: column;
}

.history-list .history-row:last-child {
  border-bottom: none;
}

.list-row-title {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 14px;
}

.list-row-sub {
  font-size: 12px;
  color: var(--ink-soft);
  margin-top: 2px;
}

.list-row-status {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-dark);
  white-space: nowrap;
}

.list-row-status.accent {
  color: var(--accent-dark);
}

.list-row-status.muted {
  color: var(--ink-soft);
}

.see-history {
  text-align: center;
  font-size: 12px;
  color: var(--primary-dark);
  font-weight: 600;
  text-decoration: none;
  padding-top: 2px;
}

/* Bekräftelse */

.card.center {
  align-items: center;
  text-align: center;
}

.k-badge {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-dark);
  color: var(--accent-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 28px;
  background: var(--accent-soft);
}

.k-label {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: var(--accent-dark);
  letter-spacing: 0.04em;
}

/* Avatarer (dina/motpartens initialer) + loggan i mitten, ihopklincade
   i en gemensam ram på bekräftelse-sidan. */
.parter-ram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--hairline);
  border-radius: 20px;
  padding: 20px;
}

.parter-rad {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

.parter-logga {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.parter-caption {
  font-size: 12px;
  color: var(--ink-soft);
  text-align: center;
  margin: 0;
}

.agreement-prompt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 12px 16px;
}

.agreement-prompt[hidden],
.motforslag-box[hidden],
.handshake-row[hidden] {
  display: none;
}

.agreement-prompt p {
  margin: 0;
  font-size: 13px;
  color: var(--ink-soft);
}

.kvitto-meta {
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
}

.full {
  width: 100%;
}

.kalender-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.mail-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  color: var(--ink-soft);
  font-size: 12px;
}

.mail-note-btn {
  border: none;
  background: none;
  color: var(--primary);
  font-size: 12px;
  font-family: inherit;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Profil */

.profile-name {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 18px;
}

.verified {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-soft);
}

.score-box {
  background: var(--primary-soft);
  border-radius: 20px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.score-number {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 700;
  font-size: 36px;
  color: var(--primary-dark);
}

.score-label {
  font-size: 12px;
  color: var(--primary-dark);
  font-weight: 600;
}

.stat-row {
  display: flex;
  gap: 12px;
}

.stat-box {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.stars {
  color: var(--primary);
  letter-spacing: 2px;
}

.stat-number {
  font-family: "Manrope", system-ui, sans-serif;
  font-weight: 600;
  font-size: 15px;
}

.stat-label {
  font-size: 11px;
  color: var(--ink-soft);
}

.symbol-row {
  display: flex;
  gap: 12px;
}

.symbol-option {
  flex: 1;
  border: 1px solid var(--hairline);
  border-radius: 16px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-soft);
}

.symbol-option .icon {
  font-size: 24px;
  line-height: 1;
}

.symbol-option.selected {
  background: var(--primary-soft);
  border: none;
  color: var(--primary-dark);
}

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

.divider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 12px 0;
}

.divider-line {
  height: 1px;
  background: var(--hairline);
  flex: 1;
}

.hourglass {
  font-size: 18px;
  animation: hourglass-intro 1s ease-out forwards, hourglass-spin 6s linear 1s;
}

@keyframes hourglass-intro {
  0% { transform: scale(0); opacity: 0; }
  50% { transform: scale(1.5); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

@keyframes hourglass-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.fly-in-up {
  animation: flyInUp 0.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes flyInUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.proposal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.proposal-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.proposal-actions[hidden] {
  display: none;
}

.proposal-actions-overlay {
  position: absolute;
  top: 12px;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 10;
}

.btn-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 1px solid #ffcccc;
  background: transparent;
  color: #cc3333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.2s ease;
  padding: 0;
}

.proposal-actions .btn-outline,
.proposal-actions-overlay .btn-outline {
  height: 24px;
  padding: 0 12px;
  font-size: 12px;
  border-radius: 12px;
  border: 1px solid var(--hairline);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.btn-remove:hover,
.proposal-actions .btn-outline:hover,
.proposal-actions-overlay .btn-outline:hover {
  background: var(--primary-soft);
  color: var(--primary-dark);
  border-color: var(--primary-soft);
}

.waiting-status-box {
  background: var(--primary-soft);
  border: 1px dashed var(--primary);
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
}

.status-top-row {
  margin-bottom: 4px;
}

.status-top-text {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-soft);
  opacity: 0.8;
}

.blink-dots {
  display: inline-block;
  animation: dotsBlink 1.5s infinite;
}

.status-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.status-links {
  margin-top: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: "Public Sans", system-ui, sans-serif;
}

.status-link {
  color: var(--primary);
  text-decoration: none;
  font-size: 12px;
  font-weight: 600;
  transition: opacity 0.2s ease;
}

.fake-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
}

.paperclip-icon {
  font-size: 11px;
  opacity: 0.7;
}

.status-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.status-link-btn {
  background: transparent;
  border: none;
  color: var(--primary);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
}

.status-link-btn:hover {
  opacity: 0.7;
}

.link-sep {
  color: var(--ink-soft);
  font-size: 10px;
}

.status-text {
  font-family: "Manrope", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--primary-dark);
}

.dots {
  display: inline-block;
  animation: dotsBlink 1.5s infinite;
}

@keyframes dotsBlink {
  0% { opacity: 0.2; }
  50% { opacity: 1; }
  100% { opacity: 0.2; }
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  100% {
    transform: scale(3);
    opacity: 0;
  }
}

/* Page Transitions */
.page-exit-fade {
  opacity: 0;
  transition: opacity 0.5s ease-out;
}

.page-exit-slide-right {
  transform: translateX(100%);
  opacity: 0;
  transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
}

.page-enter-slide-left {
  animation: slideInLeft 0.5s ease-out forwards;
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}