:root {
  --blekk: #1f2a37;
  --dempet: #6b7480;
  --linje: #e6e2da;
  --papir: #ffffff;
  --bjørk: #f6f3ee;
  --rød: #ba0c2f;
  --blå: #00205b;
}
body { font-family: "Jost", "Futura", "Helvetica Neue", Arial, sans-serif; margin: 0; padding: 0; color: var(--blekk); min-height: 100vh;
  /* Loddrett furupanel: årer, skyggelegging av bordene og mørke spor hver 160px */
  background-color: #e3bd86;
  background-image:
    repeating-linear-gradient(90deg, rgba(90, 50, 15, 0.55) 0 2px, rgba(255, 240, 210, 0.35) 2px 3px, transparent 3px 160px),
    repeating-linear-gradient(90deg, rgba(255, 235, 200, 0.18) 0 40px, rgba(160, 100, 40, 0.10) 40px 90px, rgba(255, 235, 200, 0.12) 90px 130px, rgba(150, 90, 30, 0.14) 130px 160px),
    repeating-linear-gradient(91deg, transparent 0 7px, rgba(150, 95, 40, 0.10) 7px 8px, transparent 8px 19px, rgba(150, 95, 40, 0.07) 19px 21px),
    repeating-linear-gradient(89.5deg, transparent 0 13px, rgba(120, 70, 25, 0.08) 13px 14px, transparent 14px 31px);
  background-attachment: fixed; }
/* Tynn stripe i norske flaggfarger øverst */
body::before { content: ""; display: block; height: 8px; background: linear-gradient(var(--rød) 0 37.5%, #fff 37.5% 43.75%, var(--blå) 43.75% 56.25%, #fff 56.25% 62.5%, var(--rød) 62.5%); }
.side { position: relative; max-width: 1400px; margin: 40px auto; padding: 48px 32px 64px; background: rgba(255, 255, 255, 0.94); border-radius: 24px; box-shadow: 0 10px 40px rgba(70, 40, 10, 0.25); box-sizing: border-box; }
.flagg { position: absolute; top: 48px; right: 32px; font-size: 2.25rem; }
header { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
header img { width: 64px; height: 64px; cursor: pointer; }
h1 { margin: 0; font-size: 3rem; font-weight: 300; letter-spacing: -0.02em; }
.faner { display: inline-flex; gap: 4px; padding: 4px; background: var(--bjørk); border-radius: 999px; margin-bottom: 32px; }
.faner button { font: inherit; font-size: 1rem; font-weight: 600; color: var(--dempet); padding: 12px 24px; background: transparent; border: none; border-radius: 999px; cursor: pointer; transition: background 0.2s, color 0.2s; }
.faner button.aktiv { background: var(--papir); color: var(--blå); box-shadow: 0 1px 3px rgba(31, 42, 55, 0.12); }
.panel { display: none; align-items: center; gap: 16px; margin-bottom: 40px; font-size: 1.5rem; }
.panel.aktiv { display: flex; }
select, input { font: inherit; font-size: 1.5rem; color: var(--blekk); background: var(--papir); border: 1px solid var(--linje); border-radius: 12px; padding: 10px 14px; }
input { width: 160px; text-align: right; font-weight: 600; }
select:focus, input:focus { outline: none; border-color: var(--blå); box-shadow: 0 0 0 3px rgba(0, 32, 91, 0.12); }
.gir { font-size: 1.25rem; color: var(--dempet); margin-left: 8px; }
.gir strong { color: var(--rød); font-weight: 700; }
.panel .enhet { font-size: 1rem; color: var(--dempet); }
table { border-collapse: collapse; background: var(--bjørk); border-radius: 20px; padding: 16px 28px; display: block; }
td { padding: 14px 12px 14px 0; font-size: 1.75rem; border-bottom: 1px solid var(--linje); }
tr:last-child td { border-bottom: none; }
td.mengde { width: 120px; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
td.enhet { font-size: 0.95rem; color: var(--dempet); vertical-align: bottom; padding-bottom: 18px; }
.utbytte { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 32px; }
.utbytte div { font-size: 1.75rem; padding: 24px 28px; border-radius: 20px; border: 1px solid var(--linje); background: var(--papir); }
body.fane-vil-ha .utbytte { display: none; }
.utbytte .oversett { display: inline-block; color: var(--dempet); }
.utbytte .valg { cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
.utbytte .valg:hover { border-color: var(--rød); transform: translateY(-2px); }
.utbytte .verdi { display: inline-block; min-width: 90px; text-align: right; margin-left: 16px; font-size: 2.5rem; font-weight: 700; color: var(--rød); }
.vaffelbilder { position: fixed; inset: 0; z-index: 1000; pointer-events: none; overflow: hidden; }
.vaffelbilder img { position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; }
.oversett, select { box-sizing: border-box; }
/* Klikkbare bilder og kort: ingen dra, tekstmarkering, langtrykk-meny, trykkmarkering eller dobbelttrykk-zoom */
.vaffelbilder img, header img, .utbytte .valg { -webkit-user-drag: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }