:root {
  --bg:#f3f4f6; --card:#ffffff; --ink:#111827; --muted:#6b7280; --line:#e5e7eb;
  --accent:#4f46e5; --accent-2:#4338ca; --accent-soft:#eef2ff; --hl:rgba(79,70,229,.16);
  --jump:#fde68a; --loop:#22c55e; --loop-soft:#dcfce7; --warn-bg:#fffbeb; --warn-line:#fcd34d;
  --ink-2:#374151; --card-2:#fafafa; --hover:#f9fafb; --toolbar-bg:rgba(255,255,255,.92); --loop-ink:#166534; --jump-ink:#92400e; --radius:12px; --shadow:0 1px 2px rgba(0,0,0,.05), 0 8px 24px rgba(17,24,39,.06);
}
* { box-sizing:border-box }
html { -webkit-text-size-adjust:100% }
body { margin:0; font-family:-apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Helvetica, Arial, sans-serif; background:var(--bg); color:var(--ink); font-size:14px; line-height:1.45 }
a { color:var(--accent); text-decoration:none } a:hover { text-decoration:underline }

/* ---- header + verktygsrad */
header.top { display:flex; align-items:center; gap:16px; height:52px; padding:0 20px; background:var(--card); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:20 }
.brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:17px; color:var(--ink) } .brand:hover { text-decoration:none }
.brand .glyph { color:var(--accent); font-size:22px; line-height:1 }
header h1#title { flex:1; min-width:0; margin:0; font-size:16px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; outline:none; padding:4px 8px; border-radius:8px }
header h1#title:focus { background:var(--accent-soft) }
.navlink { color:var(--muted); font-size:13px; padding:6px 10px; border-radius:8px } .navlink:hover { background:var(--bg); text-decoration:none }
.headtools { display:flex; align-items:center; gap:16px; margin-left:auto } body.pub .headtools { margin-left:0 }
.menu-btn { display:none; width:38px; height:38px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); padding:0; align-items:center; justify-content:center; flex:none }
.menu-btn svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round }
@media (max-width: 640px) {
  /* telefon: logotyp + titel + Låtar i raden, resten bakom ☰ så att sidan inte blir bredare än skärmen */
  body:not(.pub) header.top { gap:8px; padding:0 12px }
  body:not(.pub) .brand span { display:none }
  body:not(.pub) .menu-btn { display:inline-flex; margin-left:auto }
  body:not(.pub) .headtools { display:none; position:absolute; top:52px; right:8px; min-width:200px; flex-direction:column; align-items:stretch; gap:4px; margin:0;
    padding:8px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow) }
  body:not(.pub) header.top.menu-open .headtools { display:flex }
  .headtools .langsw, .headtools .theme-toggle, .headtools .whoami { margin-left:0 }
  .headtools .langsw { padding:6px 10px } .headtools .theme-toggle { align-self:flex-start; margin:2px 6px }
  .headtools .whoami { white-space:normal; word-break:break-all; font-size:12px; padding:6px 10px }
  .headtools .navlink { padding:8px 10px }
}
.toolbar { position:sticky; top:52px; z-index:19; display:flex; align-items:center; gap:14px; padding:10px 20px; background:var(--toolbar-bg); backdrop-filter:saturate(180%) blur(10px); border-bottom:1px solid var(--line) }
.toolbar .clock { min-width:44px; font-size:15px; color:var(--muted) }
.toolbar .tempo { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px } .toolbar .tempo input { width:160px; accent-color:var(--accent) } .toolbar .swing input { width:96px } .toolbar #swingval { min-width:3.2em } .toolbar .tempohere { margin-left:-4px; white-space:nowrap }
.toolbar .status { color:var(--muted); font-size:12px; margin-left:auto }
.toolbar #play { flex:none; white-space:nowrap }   /* krymper aldrig – brickraden rullar hellre */
@media (max-width: 1200px) { .toolbar .tempo input { width:120px } .toolbar .swing input { width:72px } }   /* plats för brickorna */
/* brickorna: stämmorna (app.js renderStaves) och komp/bas/klick (paintSound) – fylld = hörs, kontur = tyst. En rad
   som rullar i sidled när den inte får plats (Polskans fem stråkstämmor) */
.toolbar .chips { display:flex; gap:14px; flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none }
.toolbar .chips::-webkit-scrollbar { display:none }
.chipgroup { display:flex; gap:6px; flex:none }
.chip { flex:none; padding:5px 12px; border-radius:999px; font-size:13px; font-weight:600; white-space:nowrap; background:transparent; color:var(--muted) }
.chips .chip { text-transform:capitalize }   /* "övre", "melodi" ur ordlistan; tryckta namn börjar med versal */
.chip.on { background:var(--accent-soft); border-color:var(--accent); color:var(--ink) } .chip.on:hover { background:var(--accent-soft) }
.stavechips.off .chip { opacity:.5 }

/* ---- knappar */
button { font:inherit; padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink); cursor:pointer; transition:background .12s, transform .05s }
button:hover { background:var(--hover) } button:active { transform:translateY(1px) } button:disabled { opacity:.55; cursor:default }
button.primary { background:var(--accent); border-color:var(--accent); color:#fff } button.primary:hover { background:var(--accent-2) }
button.pill { border-radius:999px; padding:9px 18px; font-weight:600 }
.demotag { display:inline-block; margin-left:6px; padding:0 7px; border-radius:999px; font-size:11px; line-height:18px; font-weight:600; vertical-align:1px; background:rgba(16,185,129,.14); color:#047857 }
button.icon { width:38px; height:38px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:999px }
button.small { padding:5px 10px; font-size:12px; border-radius:8px } button.danger { color:#b91c1c }
button.small.on { background:var(--loop-soft); border-color:var(--loop) }
input[type=text], input[type=number], select { font:inherit; padding:7px 9px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--ink) }
input[type=text]:focus, input[type=number]:focus, select:focus { outline:2px solid var(--accent-soft); border-color:var(--accent) }
input[type=checkbox] { accent-color:var(--accent) }
.muted { color:var(--muted) } .small { font-size:12px } .mono { font-variant-numeric:tabular-nums; font-family:ui-monospace, "SF Mono", Menlo, monospace }
.row { display:flex; gap:10px; align-items:center; flex-wrap:wrap }
.hidden { display:none !important }

/* ---- kort / startsida */
main { padding:20px }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin:0 auto 16px; max-width:900px; box-shadow:var(--shadow) }
.card h1 { font-size:20px; margin:0 0 6px } .card h2 { font-size:12px; margin:0 0 10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.upload form { margin-top:12px } .upload input[type=file] { font-size:13px }
table.songs { width:100%; border-collapse:collapse } table.songs td { padding:10px 6px; border-top:1px solid var(--line); vertical-align:middle } table.songs button.small { white-space:nowrap }
.status.done { color:#15803d } .status.running, .status.queued { color:var(--accent) } .status.error { color:#b91c1c }
.warn { background:var(--warn-bg); border:1px solid var(--warn-line); padding:8px 12px; border-radius:10px; font-size:13px }
.log { background:#111827; color:#d1d5db; padding:12px; border-radius:10px; font-size:12px; max-height:260px; overflow:auto; white-space:pre-wrap }
.ptitle { font-size:18px; margin:0 0 6px }

/* ---- låtsidan */
main.songmain { padding:16px 20px }
#main { display:grid; grid-template-columns: minmax(0, 1fr) 340px; gap:18px; align-items:start; max-width:1400px; margin:0 auto }
.pages { display:flex; flex-direction:column; gap:16px }
.page { position:relative; background:#fff; border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; container-type:inline-size }
.page img { display:block; width:100%; height:auto; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }
.page .m { position:absolute; border-radius:6px; cursor:pointer; transition:background .12s; touch-action:manipulation; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none }
.page .m:hover { background:rgba(79,70,229,.07) }
.page .m.current { background:var(--hl); box-shadow: inset 0 0 0 2px rgba(79,70,229,.55) }
.page .m.loop { box-shadow: inset 0 0 0 2px var(--loop); background:rgba(34,197,94,.06) }
.page .m .tag { position:absolute; top:3px; left:3px; font-size:10px; line-height:14px; min-width:16px; text-align:center; background:rgba(107,114,128,.14); color:#4b5563; padding:0 4px; border-radius:6px; font-variant-numeric:tabular-nums }
/* taktnumret följer sidans visade bredd: på en telefon (sidan ~380 px) täckte 10 px-siffrorna sångtexten */
@supports (font-size:1cqw) { .page .m .tag { top:2px; left:2px; font-size:clamp(7px, 1.1cqw, 10px); line-height:1.35; min-width:1.5em; padding:0 .3em; border-radius:.5em } .page .m .ch { font-size:clamp(10px, 1.6cqw, 14px) } .page .m .marks { font-size:clamp(10px, 1.7cqw, 15px) } }
.page .m:hover .tag, .page .m.current .tag { background:var(--accent); color:#fff }
.page .m .tag.edited::after { content:" ✎" }
/* tolkade tecken och ackord: syns bara medan en takt rättas, så de får vara tydliga (Erik 2026-10-19: lätt att missa) */
.page .m .marks { position:absolute; bottom:2px; left:3px; font-size:15px; font-weight:600; background:rgba(255,255,255,.92); color:#b45309; padding:0 5px; border-radius:5px; white-space:nowrap; box-shadow:0 0 0 1px rgba(180,83,9,.25) }
.page .m .marks svg { width:1.05em; height:1.05em; vertical-align:-.17em; color:inherit }
.page .m .ch { position:absolute; top:3px; right:3px; font-size:14px; font-weight:600; color:var(--accent); background:rgba(255,255,255,.92); padding:0 4px; border-radius:5px; max-width:90%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.page.hidemarks .m .marks, .page.hidemarks .m .ch { display:none }

.side { position:sticky; top:118px; max-height:calc(100vh - 134px); overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow) }
.side details { border-top:1px solid var(--line); padding:8px 0 }
.side details:first-of-type { border-top:none }
.side details summary { cursor:pointer; font-size:12px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; list-style:none; padding:4px 0 }
.side details summary::-webkit-details-marker { display:none }
.side details summary::before { content:"▸"; display:inline-block; width:14px; color:var(--muted) } .side details[open] summary::before { content:"▾" }
.side details > label { margin:8px 0; display:block; font-size:13px }
#hint { margin:4px 0 12px; color:var(--muted) }
.side-foot { border-top:1px solid var(--line); padding:10px 0 2px; display:flex; flex-wrap:wrap; gap:8px }   /* "Bad reading" och "Läs om" under Mer, inte inuti den hopfällda sektionen */
.badread { color:var(--muted); white-space:nowrap } .badread:hover { color:var(--ink) }

/* ---- takt-editor */
.card-in { border:1px solid var(--line); border-radius:var(--radius); padding:12px 14px; margin:0 0 12px; background:var(--card-2) }
.edhead { display:flex; align-items:center; gap:6px; margin-bottom:10px; flex-wrap:wrap } .edhead .grow { flex:1 } .edhead strong { font-size:15px }
.card-in label.wide { display:block; font-size:12px; color:var(--muted); margin:6px 0 }
.card-in label.wide input { margin-top:4px; font-size:15px; font-weight:500; color:var(--ink) }
.edgrid { display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; font-size:13px; margin:8px 0 }
.edgrid .wide { grid-column:1 / -1 }
/* rättningen (Erik 2026-10-19): brickor för det som lästs, en palett med tecknen i noten, statusraden med Ångra
   ligger kvar längst ned i panelen (mobilens ark är 62vh) */
.ed-label { margin:12px 0 6px; font-size:12px; color:var(--muted) } .edhead + .ed-label { margin-top:0 }
.ed-fields { display:flex; gap:8px; flex-wrap:wrap }
.ed-field { flex:1 1 150px; font-size:12px; color:var(--muted) }
.ed-field input { display:block; width:100%; margin-top:4px; font-size:15px; font-weight:500; color:var(--ink) }
.ed-field.ed-timef { flex:0 0 6.5em }
.ed-chips { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; min-height:30px; align-items:center }
.ed-chips .chip { display:inline-flex; align-items:center; gap:2px; padding:3px 4px 3px 10px; border-radius:999px; font-size:14px; font-weight:600;
                  border:1px solid rgba(180,83,9,.35); background:rgba(180,83,9,.08); color:#b45309 }
.ed-chips .chip svg { width:16px; height:16px; color:inherit; vertical-align:-3px }
.ed-chips .chip .chip-x { margin-left:6px; width:20px; height:20px; border-radius:10px; line-height:20px; text-align:center; font-weight:500; background:rgba(180,83,9,.15) }
.ed-chips .chip:hover .chip-x, .ed-chips .chip:focus-visible .chip-x { background:#b45309; color:#fff }
.ed-none { font-size:13px; color:var(--muted) }
.ed-palette { display:grid; grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:6px }
.ed-palette button { min-height:40px; padding:0 6px; font-weight:600; display:inline-flex; align-items:center; justify-content:center; gap:4px }
.ed-palette button svg { width:18px; height:18px; color:inherit }
.ed-choice { margin:8px 0 0; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card) }
.ed-choice p { margin:0 0 8px; font-size:13px } .ed-choice button { margin:0 6px 6px 0 }
.ed-listen { margin-top:10px }
.ed-more { margin-top:6px }
.ed-status { position:sticky; bottom:0; z-index:1; display:flex; align-items:center; gap:8px; min-height:40px; margin:10px -14px -12px; padding:8px 14px;
             background:var(--card-2); border-top:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); font-size:13px; color:var(--muted) }
.ed-status.err { color:#b91c1c } .ed-status #ed-undo { margin-left:auto; flex:none }
/* spelordningen som block */
.porder { margin:0 0 12px; padding:10px 12px; border:1px solid var(--line); border-radius:var(--radius); background:var(--card-2) }
.rm-head { display:flex; align-items:baseline; gap:8px; margin-bottom:6px; font-size:13px }
.rm-blocks { display:flex; flex-wrap:wrap; align-items:center; gap:4px }
.rm-block { min-height:28px; padding:3px 8px; border-radius:6px; border:1px solid transparent; font-size:12px; font-variant-numeric:tabular-nums;
            background:var(--accent-soft); color:var(--accent-2) }
.rm-block.rm-ds, .rm-block.rm-dc { background:var(--jump); color:var(--jump-ink) }
.rm-block.rm-coda { background:var(--loop-soft); color:var(--loop-ink) }
.rm-block.rm-new { animation:rmnew 5s ease-out forwards }
@keyframes rmnew { 0%, 60% { border-color:var(--loop); box-shadow:0 0 0 3px rgba(34,197,94,.3) } 100% { border-color:transparent; box-shadow:none } }
@media (prefers-reduced-motion: reduce) { .rm-block.rm-new { animation:none; border-color:var(--loop) } }
.rm-arrow { color:var(--muted); font-size:11px }
details.sub { border:none !important; padding:6px 0 !important } details.sub summary { font-size:12px !important; text-transform:none !important; letter-spacing:0 !important; font-weight:500 !important; color:var(--accent) !important }

/* ---- loop */
.loopbar { display:flex; align-items:center; gap:6px; font-size:13px; padding:4px 6px 4px 12px; border-radius:999px; background:var(--loop-soft); color:var(--loop-ink); border:1px solid #bbf7d0 }
.loopbar.pending { background:var(--warn-bg); border-color:var(--warn-line); color:var(--jump-ink) }
.loopbar .icon { width:26px; height:26px; font-size:12px; border:none; background:transparent }

/* ---- spelordning */
.path { display:flex; flex-wrap:wrap; gap:4px; margin-top:6px }
details.seg { width:100%; border:1px solid var(--line); border-radius:10px; margin:3px 0; background:var(--card) }
details.seg summary { cursor:pointer; padding:6px 10px; font-size:12px; list-style:none; display:flex; gap:8px; align-items:center; text-transform:none !important; letter-spacing:0 !important; color:var(--ink) !important; font-weight:500 !important }
details.seg summary::before { display:none !important }
details.seg summary .arrow { color:var(--muted); width:10px } details.seg[open] summary .arrow { transform:rotate(90deg); display:inline-block }
details.seg summary .range { font-weight:600; font-variant-numeric:tabular-nums }
details.seg summary .jumpnote { color:var(--jump-ink); background:var(--jump); border-radius:6px; padding:0 6px }
details.seg summary.current { background:var(--accent-soft) }
details.seg .chips { display:flex; flex-wrap:wrap; gap:3px; padding:4px 10px 10px }
.path .st { padding:2px 7px; border:1px solid var(--line); border-radius:6px; font-size:12px; cursor:pointer; background:var(--card); font-variant-numeric:tabular-nums }
.path .st.jump { background:var(--jump); border-color:#f59e0b }
.path .st.current { outline:2px solid var(--accent); background:var(--accent-soft) }
.path .st.coda { border-left:3px solid #b45309 }
.path .st.loop { box-shadow: inset 0 0 0 2px var(--loop) }
.chart { font-size:13px; line-height:1.9; margin-top:8px }
.chart .mm { display:inline-block; min-width:48px; border-left:1px solid var(--line); padding:0 6px; cursor:pointer } .chart .mm.current { background:var(--accent-soft) }

/* ---- smal skärm: noterna först, panelen som ett ark längst ner. Bara listen syns (även när en takt är vald:
   "Takt 18 · Em7" + loop); tryck på den eller dra uppåt fäller ut hela arket */
.sheet-handle { display:none }
@media (max-width: 980px) {
  main.songmain { padding:10px 10px 80px }
  body.sheet-open main.songmain { padding-bottom:calc(62vh + 16px) }   /* sista raden går att rulla fram ovanför det utfällda arket */
  #main { grid-template-columns:1fr }
  .side { position:fixed; top:auto; left:0; right:0; bottom:0; z-index:30; max-height:62vh; overflow:auto; border-radius:16px 16px 0 0; border-bottom:none;
          box-shadow:0 -8px 24px rgba(17,24,39,.14); padding-top:0; transform:translateY(calc(100% - 56px)); transition:transform .22s ease }
  .side.open { transform:none }
  .side.dragging { transition:none }
  .sheet-handle { display:flex; position:sticky; top:0; z-index:1; height:56px; align-items:center; gap:10px; margin:0 -16px 10px; padding:6px 16px 0;
                  background:var(--card); border-bottom:1px solid var(--line); touch-action:none }
  .sheet-handle::before { content:""; position:absolute; top:7px; left:50%; width:36px; height:4px; margin-left:-18px; border-radius:2px; background:var(--muted); opacity:.5 }   /* greppkanten */
  .sheet-toggle { flex:1; min-width:0; display:flex; align-items:center; height:100%; padding:0; border:none; border-radius:0; background:none; font-weight:600; color:var(--ink); text-align:left }
  .sheet-toggle::after { content:""; position:absolute; inset:0 }   /* hela listen är knappen, utom loopknappen */
  .sheet-toggle:hover { background:none } .sheet-toggle:active { transform:none }
  #sheetlabel { overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
  .sheet-loop { position:relative; z-index:1; flex:none; min-height:36px; white-space:nowrap }
  .sheet-handle .chev { color:var(--muted); pointer-events:none; transition:transform .22s } .side.open .sheet-handle .chev { transform:rotate(180deg) }
  .toolbar { flex-wrap:wrap; gap:10px; padding:8px 10px } .toolbar .tempo input { width:110px } .toolbar .swing input { width:80px }
  .side .edhead { display:none }   /* taktnumret och loopen står redan i listen */
  .side { padding-bottom:24px }   /* sista knappen fri från hemindikatorn */
}
@media (pointer: coarse) { .mouse-only { display:none } .side-foot .badread { min-height:44px; padding:0 14px; font-size:13px } }
@media (max-width: 640px) {
  /* telefon: uppspelning och brickorna på första raden (får de inte plats en egen), tempo/swing på nästa */
  .toolbar { row-gap:0 } .toolbar::after { content:""; order:1; flex-basis:100% }
  .toolbar .tempo, .toolbar .loopbar, .toolbar .status { order:2; margin-top:10px }
  .toolbar .tempo input { width:88px } .toolbar .swing input { width:64px } .toolbar #swingval { min-width:2.6em }
}
@media (max-width: 600px) {
  main { padding:12px } .card { padding:16px }
  table.songs td { padding:8px 4px } table.songs .info { display:none } table.songs button.small { white-space:nowrap }
}

/* uppladdningskortet: "Har du noterna på papper eller som fil?" – två lika val på pekskärm, bara filvägen med mus.
   Filvalet är också dropzonen (hela fönstret tar emot släpp, index.html). .pref = vägen man tog senast (localStorage). */
.choose-q { margin:0 0 10px; font-size:15px; font-weight:600 }
.choose { display:grid; grid-template-columns:1fr; gap:10px }
.choice { display:flex; flex-direction:column; align-items:flex-start; gap:6px; min-height:96px; padding:14px 16px; text-align:left;
  border:1.5px solid var(--line); border-radius:14px; background:var(--card-2); color:var(--ink); transition:border-color .15s, background .15s }
.choice:hover, body.dragging .choice.file { border-color:var(--accent); background:var(--accent-soft) }
.choice:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
.choice-ico svg { width:26px; height:26px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.choice-t { font-size:16px; font-weight:600; line-height:1.3 }
.choice-s { font-size:13px; color:var(--muted); line-height:1.4 }
.choice.cam, .touch-only { display:none }
@media (pointer: coarse) {
  .choose { grid-template-columns:1fr 1fr }
  .choice.cam { display:flex } .touch-only { display:inline }
  .choice.pref { border-color:var(--accent) }
}
@media (pointer: coarse) and (max-width: 420px) { .choice { padding:12px 12px; min-height:0 } .choice-t { font-size:15px } }
@media (pointer: coarse) and (max-width: 330px) { .choose { grid-template-columns:1fr } }
.choose.busy .choice { opacity:.7; pointer-events:none }
.camera-row { display:none } @media (pointer: coarse) { .camera-row:not(:empty) { display:block; margin-top:10px } }   /* återuppta-rutan (scan.js) */
#dz-status { margin-top:8px } #dz-status:empty { display:none }
.pages-opt { margin-top:14px; font-size:13px }
.pages-opt summary { display:inline-flex; align-items:center; gap:6px; color:var(--muted); cursor:pointer; list-style:none }
.pages-opt summary::-webkit-details-marker { display:none }
.pages-opt summary::before { content:'›'; font-size:16px; line-height:1; transition:transform .15s }
.pages-opt[open] summary::before { transform:rotate(90deg) }
.pages-opt .row { margin-top:8px }
.readsbest { margin:14px 0 0 }
.linklike { color:var(--accent); cursor:pointer; text-decoration:underline }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap }
body.dragging::after { content:"Drop to import"; position:fixed; inset:0; display:flex; align-items:center; justify-content:center; font-size:28px; font-weight:600; color:var(--accent); background:var(--accent-soft); opacity:.92; pointer-events:none; z-index:50 }

/* ---- inläsning: stapel + bubblor */
.prow { display:flex; align-items:baseline; justify-content:space-between; gap:12px } .prow p { margin:0 }
.ppct { font-size:13px; color:var(--muted); font-variant-numeric:tabular-nums }
.pbar { height:12px; background:var(--accent-soft); border-radius:999px; overflow:hidden; margin:8px 0 12px }
.ptimerow { margin:-6px 0 12px; min-height:1.2em }   /* "Ungefär 40 sekunder kvar" + klockan under stapeln */
.pfill { height:100%; width:0; background:var(--accent); border-radius:999px; transition:width .5s ease; position:relative }
.pbar.running .pfill::after { content:""; position:absolute; inset:0; border-radius:999px;
  background:linear-gradient(90deg, transparent 0, rgba(255,255,255,.35) 50%, transparent 100%); background-size:200% 100%;
  animation:pshine 1.6s linear infinite }
@keyframes pshine { from { background-position:200% 0 } to { background-position:-200% 0 } }
@media (prefers-reduced-motion: reduce) { .pbar.running .pfill::after { animation:none } }
.pfill.err { background:#b91c1c }
/* biblioteket: förloppet i raden under titeln (index.html, DulyLibrary) och Öppna-knappen när låten blir klar */
.rowprog { margin-top:6px; max-width:560px }
.rp-bar { display:flex; align-items:center; gap:10px } .rp-bar .pbar { flex:1; height:8px; margin:0 }
.rp-pct { font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; min-width:3.2em; text-align:right }
.rp-text { margin-top:3px; min-height:1.2em } .rp-text.err { color:#b91c1c }
a.btn-open { display:inline-block; background:var(--accent); color:#fff; padding:6px 14px; border-radius:999px; font-weight:600; font-size:13px; white-space:nowrap }
a.btn-open:hover { background:var(--accent-2); text-decoration:none }
#perror .btn-ghost { font-size:inherit; padding:9px 18px }   /* lika stor som knappen bredvid */
#prun { margin-top:8px }
#toasts { position:fixed; right:20px; bottom:20px; display:flex; flex-direction:column; gap:8px; z-index:50 }
.toast { display:flex; align-items:center; gap:12px; background:#111827; color:#f9fafb; padding:10px 12px 10px 16px; border-radius:12px; box-shadow:0 8px 24px rgba(17,24,39,.25); font-size:13px; max-width:360px }
.toast a { color:#c7d2fe } .toast.sticky { background:#7f1d1d }
.toast button.icon { background:transparent; border:0; color:inherit; padding:2px 6px; cursor:pointer }

/* ---- introduktionsballongerna (tips.js): fast placerad bredvid målet, pilen i --ax; målet får en pulserande ring */
.balloon { position:fixed; z-index:40; width:min(300px, calc(100vw - 24px)); background:var(--accent); color:#fff; border-radius:14px;
  padding:14px 14px 12px 16px; box-shadow:0 10px 30px rgba(17,24,39,.28); font-size:14px; line-height:1.45 }
.balloon.in { animation:balloon-in .18s ease-out }
.balloon::before { content:""; position:absolute; top:-6px; left:var(--ax, 50%); width:12px; height:12px; background:inherit; border-radius:2px; transform:translateX(-50%) rotate(45deg) }
.balloon.above::before { top:auto; bottom:-6px }
.balloon-text { margin:0 26px 10px 0 }
.balloon-foot { display:flex; align-items:center; justify-content:space-between; gap:10px }
.balloon-n { font-size:12px; opacity:.8; font-variant-numeric:tabular-nums }
.balloon button.balloon-next { background:#fff; border-color:#fff; color:var(--accent); font-weight:600; padding:6px 14px }
.balloon button.balloon-next:hover { background:var(--accent-soft) }
.balloon button.balloon-x { position:absolute; top:6px; right:6px; width:30px; height:30px; padding:0; border:0; border-radius:999px; background:transparent; color:inherit; opacity:.85; font-size:14px }
.balloon button.balloon-x:hover { background:rgba(255,255,255,.18); opacity:1 }
.balloon-target { outline:3px solid var(--accent); outline-offset:3px; animation:balloon-pulse 1.8s ease-out infinite }
@keyframes balloon-in { from { opacity:0; transform:translateY(4px) } }
@keyframes balloon-pulse { 0% { box-shadow:0 0 0 0 var(--hl) } 70%, 100% { box-shadow:0 0 0 12px transparent } }
@media (prefers-reduced-motion: reduce) { .balloon.in, .balloon-target { animation:none } }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) .balloon { color:#0f1117 } html:not([data-theme=light]) .balloon button.balloon-next { background:#0f1117; border-color:#0f1117; color:var(--accent) } html:not([data-theme=light]) .balloon button.balloon-x:hover { background:rgba(0,0,0,.12) } }
html[data-theme=dark] .balloon { color:#0f1117 } html[data-theme=dark] .balloon button.balloon-next { background:#0f1117; border-color:#0f1117; color:var(--accent) } html[data-theme=dark] .balloon button.balloon-x:hover { background:rgba(0,0,0,.12) }

/* spelknappen: förbereder ljud / nyss klart */
button#play.busy { opacity:.75; cursor:progress }
button#play.ready { animation: playready 1s ease-in-out 3 }
@keyframes playready { 0%,100% { box-shadow:0 0 0 0 rgba(37,99,235,.0) } 50% { box-shadow:0 0 0 8px rgba(37,99,235,.35) } }

.whoami { margin-left:12px; white-space:nowrap }

/* ---- publik sajt: startsida, villkor, integritet */
main.public { max-width:860px; margin:0 auto; padding:24px 16px 48px }
.btn-primary { display:inline-block; background:var(--accent); color:#fff; padding:8px 16px; border-radius:999px; font-weight:600; font-size:13px } .btn-primary:hover { background:var(--accent-2); text-decoration:none }
.btn-primary.big { font-size:16px; padding:12px 24px }
.hero { text-align:center; padding:40px 8px 24px } .hero .glyph-big { font-size:64px; color:var(--accent); line-height:1 }
.hero h1 { font-size:34px; line-height:1.15; margin:12px 0 } .hero .lead { font-size:17px; color:var(--muted); max-width:640px; margin:0 auto 20px }
.steps ol { padding-left:22px; margin:0 } .steps li { margin:8px 0 }
.plans { display:flex; gap:16px; flex-wrap:wrap; margin:12px 0 }
.plan { flex:1 1 220px; border:1px solid var(--line); border-radius:var(--radius); padding:16px } .plan.featured { border-color:var(--accent); background:var(--accent-soft) }
.plan h3 { margin:0 0 6px } .plan .price { font-size:32px; font-weight:700 } .plan .per { font-size:14px; color:var(--muted); font-weight:400; margin-left:4px }
ul.plain { padding-left:20px } ul.plain li { margin:6px 0 }
.public-footer { text-align:center; margin-top:32px }
.legal h1 { font-size:26px } .legal h2 { font-size:17px; margin-top:24px } .legal p, .legal li { font-size:14px; line-height:1.55 }
.legal-table { border-collapse:collapse; width:100%; font-size:13px } .legal-table th, .legal-table td { text-align:left; vertical-align:top; padding:6px 8px; border-bottom:1px solid var(--line) }

button.plan { font:inherit; color:inherit; text-align:left; cursor:pointer; background:var(--card) } button.plan:hover { border-color:var(--accent) } button.plan.featured { background:var(--accent-soft) }

/* ---- logotyp (SVG – segno-tecknet saknas i systemfonterna) */
.brand .logo { width:26px; height:26px; color:var(--accent); flex:none }

/* ---- startsidan (dulynoted.se) */
main.public.landing { max-width:1120px; padding:0 20px 56px }
.pubnav { display:flex; gap:2px; margin-left:auto } .pubnav + .btn-primary { margin-left:8px }
@media (max-width: 760px) { .pubnav { display:none } header.top .btn-primary { margin-left:auto } }
.landing h2 { font-size:28px; letter-spacing:-.01em; margin:0 0 8px; text-align:center; color:var(--ink); text-transform:none }
.landing section { margin:0 0 72px }
.center { text-align:center }

.hero2 { display:grid; grid-template-columns:minmax(0,5fr) minmax(0,6fr); gap:40px; align-items:center; padding:56px 0 24px; position:relative }
.hero2::before { content:""; position:absolute; inset:-60px -16px 0; z-index:-1; pointer-events:none;
  background:radial-gradient(60% 60% at 30% 20%, rgba(79,70,229,.14), transparent 70%), radial-gradient(40% 50% at 85% 70%, rgba(99,102,241,.10), transparent 70%) }
.eyebrow { font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin:0 0 10px }
.hero2 h1 { font-size:46px; line-height:1.06; letter-spacing:-.02em; margin:0 0 16px; font-weight:800 }
.hero2 h1 .accent { color:var(--accent) }
.hero2 .lead { font-size:17px; line-height:1.55; color:var(--ink-2); margin:0 0 22px; max-width:520px }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-bottom:18px }
.btn-primary.big { font-size:16px; padding:13px 26px; box-shadow:0 6px 20px rgba(79,70,229,.28) }
.btn-ghost { display:inline-block; padding:12px 22px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-weight:600; font-size:15px }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); text-decoration:none }
.btn-ghost.block, .btn-primary.block { display:block; text-align:center; margin-top:14px }
.hero-points { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:6px; font-size:14px; color:var(--muted) }
.hero-points li::before { content:"✓"; color:var(--accent); font-weight:700; margin-right:8px }
.hero-shot { margin:0; min-width:0 } .hero-shot figcaption { text-align:center; margin-top:10px }
.window { background:var(--card); border-radius:14px; overflow:hidden; border:1px solid var(--line);
  box-shadow:0 2px 4px rgba(17,24,39,.06), 0 30px 60px -20px rgba(17,24,39,.35), 0 0 0 1px rgba(79,70,229,.06) }
.window-bar { display:flex; gap:6px; padding:9px 12px; background:var(--bg); border-bottom:1px solid var(--line) }
.window-bar span { width:10px; height:10px; border-radius:50%; background:var(--line) }
.window img { display:block; width:100%; height:auto }

.strip { display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden }
.strip div { background:var(--card); padding:16px 18px; display:flex; flex-direction:column; gap:3px }
.strip strong { font-size:14px } .strip span { font-size:13px; color:var(--muted) }

.features h2, .how h2, .pricing h2, .faq h2 { margin-bottom:28px }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px }
.feature-grid article { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px 22px 18px; box-shadow:var(--shadow) }
.feature-grid svg { width:28px; height:28px; fill:none; stroke:var(--accent); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-bottom:12px }
.feature-grid h3 { font-size:16px; margin:0 0 6px } .feature-grid p { margin:0; font-size:14px; line-height:1.5; color:var(--ink-2) }

.how-steps { list-style:none; padding:0; margin:0 0 40px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; counter-reset:none }
.how-steps li { position:relative; padding:0 8px }
.how-steps .num { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:50%; background:var(--accent); color:#fff; font-weight:700; margin-bottom:10px }
.how-steps h3 { margin:0 0 4px; font-size:17px } .how-steps p { margin:0; color:var(--ink-2); font-size:14px; line-height:1.5 }
.phone-row { display:grid; grid-template-columns:260px 1fr; gap:36px; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:28px 32px; box-shadow:var(--shadow) }
.phone-shot { width:100%; height:auto; border-radius:22px; border:6px solid #111827; box-shadow:0 20px 40px -16px rgba(17,24,39,.5) }
.phone-copy h3 { font-size:22px; margin:0 0 8px } .phone-copy p { font-size:15px; line-height:1.55; color:var(--ink-2); margin:0 }

.pricing .plans { max-width:980px; margin:22px auto 10px } .pricing .plan { flex-basis:200px } .pricing .plan { padding:22px; position:relative; background:var(--card) }
.pricing .plan.featured { background:var(--card); box-shadow:0 0 0 2px var(--accent), var(--shadow) }
.badge { position:absolute; top:-12px; left:22px; background:var(--accent); color:#fff; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:999px }
.pricing .price { margin:4px 0 } .pricing-notes { max-width:720px; margin:14px auto 0 }

.landing section.faq { max-width:720px; margin-left:auto; margin-right:auto }
.faq details { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:0 18px; margin-bottom:10px }
.faq summary { cursor:pointer; font-weight:600; font-size:15px; padding:14px 0; list-style:none; display:flex; justify-content:space-between; align-items:center }
.faq summary::-webkit-details-marker { display:none } .faq summary::after { content:"+"; color:var(--accent); font-size:20px; font-weight:400 }
.faq details[open] summary::after { content:"–" } .faq details p { margin:0 0 16px; font-size:14px; line-height:1.55; color:var(--ink-2) }

.cta-final { text-align:center; background:linear-gradient(135deg, #4f46e5, #6d28d9); color:#fff; border-radius:18px; padding:48px 24px }
.cta-final h2 { color:#fff; margin-bottom:6px } .cta-final .muted { color:#c7d2fe; margin:0 0 20px }
.cta-final .btn-primary { background:#fff; color:var(--accent) } .cta-final .btn-primary:hover { background:#eef2ff }
.landing .public-footer { margin-top:0 }

@media (max-width: 900px) {
  .hero2 { grid-template-columns:1fr; gap:28px; padding-top:32px } .hero2 h1 { font-size:36px }
  .strip, .feature-grid, .how-steps { grid-template-columns:repeat(2,1fr) }
  .phone-row { grid-template-columns:200px 1fr; gap:24px; padding:22px }
}
@media (max-width: 600px) {
  main.public.landing { padding:0 16px 40px } .landing section { margin-bottom:48px }
  .hero2 h1 { font-size:30px } .landing h2 { font-size:24px }
  .strip, .feature-grid, .how-steps, .phone-row { grid-template-columns:1fr }
  .phone-shot { max-width:220px; margin:0 auto; display:block } .phone-copy { text-align:center }
}

/* ---- startsidans OMR-avsnitt, sidfoten och guiderna (site.py) */
.window picture { display:block }
.landing section.omr-intro { max-width:760px; margin-left:auto; margin-right:auto; text-align:center }
.omr-intro p { font-size:16px; line-height:1.6; color:var(--ink-2); margin:0 0 14px }
.omr-links { display:flex; gap:8px 24px; justify-content:center; flex-wrap:wrap; font-weight:600 }
.public-footer p { margin:6px 0 } .footer-links { font-size:13px }
.guide-body p a, .guide-body li a, .guide-body td a, .faq details p a { text-decoration:underline; text-underline-offset:2px }
html[data-theme=dark] .pricing .badge { color:#0f1117 }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) .pricing .badge { color:#0f1117 } }
main.public.guide { max-width:760px; margin:0 auto; padding:20px 20px 56px }
.crumbs { margin:4px 0 18px } .crumbs a { color:var(--muted); text-decoration:underline; text-underline-offset:2px }
.guide-body h1 { font-size:38px; line-height:1.1; letter-spacing:-.02em; margin:0 0 10px; font-weight:800 }
.guide-body .byline { margin:0 0 22px }
.guide-body .lede { font-size:19px; line-height:1.6; color:var(--ink) }
.guide-body h2 { font-size:25px; line-height:1.25; letter-spacing:-.01em; margin:44px 0 10px; color:var(--ink); text-transform:none }
.guide-body h3 { font-size:18px; margin:26px 0 6px }
.guide-body p, .guide-body li, .guide-body td, .guide-body th { font-size:16px; line-height:1.65; color:var(--ink-2) }
.guide-body ul, .guide-body ol { padding-left:22px } .guide-body li { margin:6px 0 }
.guide-body strong { color:var(--ink) }
.toc { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:14px 20px; margin:24px 0 }
.toc strong { font-size:13px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted) }
.guide-body .toc ol { margin:6px 0 0 } .guide-body .toc li { font-size:15px; margin:3px 0 }
.tip { background:var(--accent-soft); border-radius:var(--radius); padding:14px 18px; margin:18px 0 }
.guide-body .tip p { margin:0; color:var(--ink) }
.guide-table { width:100%; border-collapse:collapse; margin:14px 0 } .guide-table th, .guide-table td { text-align:left; vertical-align:top; padding:8px 10px; border-bottom:1px solid var(--line) }
.guide-table th { font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted) } .guide-table td:first-child { white-space:nowrap; font-weight:600; color:var(--ink) }
.guide .cta-final { margin-top:52px }
.sym { width:18px; height:18px; vertical-align:-4px; flex:none }
.roadmap { margin:18px 0 24px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:36px 18px 14px }
.guide-body .bars { display:flex; flex-wrap:wrap; row-gap:40px; list-style:none; margin:0; padding:0 }
.guide-body .bars li { position:relative; width:52px; height:42px; margin:0 0 0 -1.5px; border:1.5px solid var(--ink-2);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; color:var(--ink); background:var(--card-2) }
.guide-body .bars li:first-child { margin-left:0 }
.guide-body .bars li.rs { border-left:4px solid var(--ink) } .guide-body .bars li.re { border-right:4px solid var(--ink) }
.bars li.rs::before, .bars li.re::after { content:":"; position:absolute; top:50%; transform:translateY(-55%); font-weight:900; font-size:18px; color:var(--ink) }
.bars li.rs::before { left:3px } .bars li.re::after { right:3px }
.bars .vb { position:absolute; left:-1.5px; right:4px; top:-15px; height:11px; border-top:1.5px solid var(--accent); border-left:1.5px solid var(--accent);
  font-size:11px; line-height:1; color:var(--accent); padding:2px 0 0 3px; font-weight:700 }
.guide-body .bars li.gap { margin-left:24px }
.bars .above { position:absolute; bottom:calc(100% + 5px); left:50%; transform:translateX(-50%); white-space:nowrap; font-size:11px; font-weight:700;
  color:var(--jump-ink); display:flex; align-items:center; gap:2px }
.bars li.has-volta .above { bottom:calc(100% + 18px) }
.roadmap figcaption { margin-top:16px; font-size:14px; line-height:1.5 }
.roadmap .order { font-family:ui-monospace, "SF Mono", Menlo, monospace; font-weight:600; color:var(--ink); word-spacing:3px }
/* jämförelsen (compare_scanners*.html): översikten rullar i sidled i mobilen, första kolumnen står kvar */
.table-scroll { overflow-x:auto; margin:14px 0 }
.table-scroll .guide-table { margin:0; min-width:720px }
.guide-table.compare th, .guide-table.compare td { font-size:14px; line-height:1.5 }
.guide-table tbody th { font-size:16px; line-height:1.65; text-transform:none; letter-spacing:0; font-weight:600; color:var(--ink) }
.guide-table.compare th:first-child { position:sticky; left:0; background:var(--bg); z-index:1 }
.guide-table.compare tbody th { font-size:14px; line-height:1.5; min-width:120px }
.guide-table.compare .us { background:var(--accent-soft); color:var(--ink) }
.guide-table.facts tbody th { width:26% } .guide-table .src { display:block; margin-top:4px; font-size:13px; line-height:1.5; color:var(--muted) }
.better { border-left:3px solid var(--loop); padding:2px 0 2px 16px; margin:16px 0 }
.better h3 { margin-top:0 }
@media (max-width: 600px) {
  main.public.guide { padding:12px 16px 40px } .guide-body h1 { font-size:30px } .guide-body h2 { font-size:22px }
  .guide-body .lede { font-size:17px } .guide-body .bars li { width:44px } .roadmap { padding:34px 12px 12px }
}

/* ---- mörkt läge (hela appen): systemet, eller knappen i sidhuvudet → localStorage "theme" */
body { background:var(--bg); color:var(--ink) }
.theme-toggle { width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:var(--card); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; padding:0; margin-left:8px; flex:none }
.theme-toggle:hover { color:var(--accent); border-color:var(--accent) } .theme-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.theme-toggle .sun { display:none }
html[data-theme=dark] .theme-toggle .sun { display:block } html[data-theme=dark] .theme-toggle .moon { display:none }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) .theme-toggle .sun { display:block } html:not([data-theme=light]) .theme-toggle .moon { display:none } }
html[data-theme=dark] body { --bg:#0f1117; --card:#171a23; --card-2:#1d212c; --hover:#20242f; --toolbar-bg:rgba(23,26,35,.92); --ink:#f3f4f6; --ink-2:#c9cdd6; --muted:#9aa0ad; --line:#2a2f3c; --accent:#8b8ff5; --accent-2:#a5b4fc; --accent-soft:#1e1b4b; --hl:rgba(139,143,245,.22); --loop-soft:#14532d; --loop-ink:#bbf7d0; --jump:#78350f; --jump-ink:#fde68a; --warn-bg:#3b2f0b; --warn-line:#a16207; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); color-scheme:dark }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) body { --bg:#0f1117; --card:#171a23; --card-2:#1d212c; --hover:#20242f; --toolbar-bg:rgba(23,26,35,.92); --ink:#f3f4f6; --ink-2:#c9cdd6; --muted:#9aa0ad; --line:#2a2f3c; --accent:#8b8ff5; --accent-2:#a5b4fc; --accent-soft:#1e1b4b; --hl:rgba(139,143,245,.22); --loop-soft:#14532d; --loop-ink:#bbf7d0; --jump:#78350f; --jump-ink:#fde68a; --warn-bg:#3b2f0b; --warn-line:#a16207; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); color-scheme:dark } }
/* mörkt läge: vit text på den ljusa accentfärgen (#8b8ff5) och röd #b91c1c på kortet gav ~2,8:1 – mörk text på
   primärknappar, ljusare rött på farliga knappar (≥ 4,5:1) */
html[data-theme=dark] button.danger, html[data-theme=dark] .rp-text.err { color:#f87171 } html[data-theme=dark] button.primary, html[data-theme=dark] .btn-primary, html[data-theme=dark] a.btn-open, html[data-theme=dark] .scan .scan-done { color:#0f1117 }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) button.danger, html:not([data-theme=light]) .rp-text.err { color:#f87171 } html:not([data-theme=light]) button.primary, html:not([data-theme=light]) .btn-primary, html:not([data-theme=light]) a.btn-open, html:not([data-theme=light]) .scan .scan-done { color:#0f1117 } }
.langsw { display:inline-flex; gap:2px; margin-left:8px; font-size:11px; font-weight:700; letter-spacing:.04em }
.langsw a { color:var(--muted); padding:4px 6px; border-radius:6px } .langsw a.on { color:var(--accent); background:var(--accent-soft) } .langsw a:hover { text-decoration:none; color:var(--accent) }
.mus { width:16px; height:16px; vertical-align:-3px; color:var(--ink) }
body.pub { overflow-x:hidden }
.phone-shot { max-height:440px; object-fit:cover; object-position:top }
body.pub .brand span, body.pub header.top .btn-primary { white-space:nowrap }
@media (max-width: 600px) { body.pub .navlink { padding:6px 6px } body.pub .brand span { display:none } .langsw { margin-left:4px } }

/* ---- skannern (scan.js): kameran i helskärm, sidorna i högermarginalen. Kameraytan är mörk i båda
   temana; marginalen och sidvyn följer temat. z-index över bubblorna (50) och arket (30). */
html.scan-open, html.scan-open body { overflow:hidden; overscroll-behavior:none }
html.scantest .choice.cam { display:flex }   /* ?scantest=1: kameravalet syns även med mus */
.scan { position:fixed; inset:0; z-index:100; display:grid; grid-template-columns:minmax(0,1fr) 84px; height:100vh; height:100dvh;
  background:#000; color:#fff; overscroll-behavior:contain; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; -webkit-tap-highlight-color:transparent }
.scan button { touch-action:manipulation }
/* nyp och dubbeltryck på kamerabilden ska inte zooma hela sidan (iOS bryr sig inte om user-scalable) */
.scan-stage { position:relative; overflow:hidden; min-width:0; min-height:0; touch-action:none }
.scan-tray, .scan-view-quality, .scan-files { touch-action:pan-y }
.scan-thumb-item { flex:none }
.scan-video, .scan-overlay { position:absolute; inset:0; width:100%; height:100%; display:block }
.scan-video { object-fit:contain; background:#000 }
.scan-overlay { pointer-events:none }
.scan-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none }
.scan-flash.on { animation:scanflash .3s ease-out }
@keyframes scanflash { from { opacity:.8 } to { opacity:0 } }
.scan-top { position:absolute; top:0; left:0; right:0; display:flex; align-items:center; gap:10px; padding:calc(10px + env(safe-area-inset-top)) 12px 18px;
  background:linear-gradient(rgba(0,0,0,.55), transparent) }
.scan-grow { flex:1 }
.scan .scan-round { width:46px; height:46px; flex:none; border-radius:50%; padding:0; display:inline-flex; align-items:center; justify-content:center;
  border:none; background:rgba(0,0,0,.5); color:#fff }
.scan .scan-round:hover { background:rgba(0,0,0,.68) }
.scan-round svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.scan .scan-torch[aria-pressed=true] { background:#fde68a; color:#111827 }
.scan .scan-torch.suggest { box-shadow:0 0 0 3px #fde68a; animation:scanpulse 1.4s ease-in-out infinite }
@keyframes scanpulse { 50% { box-shadow:0 0 0 8px rgba(253,230,138,.3) } }
.scan .scan-auto { height:36px; border-radius:999px; padding:0 14px; border:1px solid rgba(255,255,255,.55); background:rgba(0,0,0,.5); color:#fff;
  font-size:12px; font-weight:700; letter-spacing:.06em; text-transform:uppercase }
.scan .scan-auto:hover { background:rgba(0,0,0,.68) }
.scan .scan-auto[aria-pressed=true] { background:#22c55e; border-color:#22c55e; color:#052e16 }
.scan-bottom { position:absolute; left:8px; right:8px; bottom:calc(118px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:center; gap:8px; pointer-events:none }
.scan-hint { max-width:100%; padding:8px 14px; border-radius:999px; background:rgba(0,0,0,.66); color:#fff; font-size:13px; line-height:1.3; text-align:center }
.scan-hint:empty { display:none }
.scan-chip { display:flex; align-items:center; gap:4px; padding:2px 2px 2px 14px; border-radius:999px; background:#fde68a; color:#111827; font-size:13px; font-weight:600; pointer-events:auto }
.scan .scan-chip button { width:36px; height:36px; padding:0; border:none; border-radius:50%; background:transparent; color:inherit }
.scan-controls { position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-around;
  padding:16px 12px calc(20px + env(safe-area-inset-bottom)); background:linear-gradient(transparent, rgba(0,0,0,.6)) }
.scan .scan-shutter { --p:0; width:84px; height:84px; flex:none; border-radius:50%; padding:6px; border:none;
  background:conic-gradient(#22c55e calc(var(--p) * 360deg), rgba(255,255,255,.95) 0); box-shadow:0 0 0 2px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.35) }
.scan .scan-shutter:hover { background:conic-gradient(#22c55e calc(var(--p) * 360deg), #fff 0) }
.scan-shutter span { display:block; width:100%; height:100%; border-radius:50%; background:#fff; border:3px solid #000; transition:transform .08s }
.scan-shutter:active span, .scan-shutter.waiting span { transform:scale(.9) }
.scan-shutter.waiting span { background:#dcfce7 }
.scan-ghost { visibility:hidden }
.scan-restart { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.6) }
/* centrerat när det får plats, rullbart när det inte gör det (liggande telefon, lång notis): auto-marginaler
   i stället för justify-content:center, som skär av både överkant och nederkant */
.scan-files { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:14px; padding:24px 20px; text-align:center;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch }
.scan-files-icon { margin-top:auto }
.scan-files-icon svg { width:56px; height:56px; fill:none; stroke:#a5b4fc; stroke-width:1.5; stroke-linejoin:round }
.scan-files-note { margin:0; max-width:340px; padding:10px 12px; border-radius:10px; background:rgba(253,230,138,.14); color:#fde68a; font-size:13px }
.scan-files .pill { min-width:220px; min-height:48px; font-size:15px }
.scan-files button.pill:not(.primary) { background:rgba(255,255,255,.1); border-color:rgba(255,255,255,.35); color:#fff }
.scan-tips { margin:4px 0 auto; max-width:320px; color:#c9cdd6; font-size:13px; line-height:1.45 }
.scan.files .scan-video, .scan.files .scan-overlay, .scan.files .scan-controls, .scan.files .scan-auto, .scan.files .scan-torch { display:none }
.scan.files .scan-bottom { bottom:calc(16px + env(safe-area-inset-bottom)) }
.scan-debug { position:absolute; left:8px; top:64px; max-width:calc(100% - 16px); max-height:50%; overflow:auto; margin:0; padding:6px 8px; border-radius:8px;
  background:rgba(0,0,0,.72); color:#a7f3d0; font:10px/1.3 ui-monospace, Menlo, monospace; white-space:pre-wrap; pointer-events:none }

/* marginalen: miniatyrer uppifrån och ner, ✓ Klar längst ner */
.scan-tray { display:flex; flex-direction:column; min-height:0; background:var(--card-2); color:var(--ink); border-left:1px solid var(--line); padding-top:env(safe-area-inset-top) }
.scan-thumbs { flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; align-items:center; gap:14px; padding:14px 0 10px }
.scan-empty { margin:6px 8px; color:var(--muted); font-size:11px; line-height:1.35; text-align:center }
.scan .scan-thumb { position:relative; flex:none; width:62px; min-height:52px; padding:0; border:1px solid var(--line); border-radius:6px; background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,.18) }
.scan .scan-thumb:hover { background:#fff; border-color:var(--accent) }
.scan-thumb-img { display:block; min-height:52px; border-radius:5px; overflow:hidden }
.scan-thumb-img img, .scan-thumb-img canvas { display:block; width:100%; height:auto }
.scan-thumb-img[data-kind=blank] { height:84px }
.scan-thumb-n { position:absolute; left:-7px; bottom:-7px; min-width:22px; height:22px; padding:0 6px; border-radius:11px; background:#111827; color:#fff;
  font-size:11px; font-weight:700; line-height:22px; text-align:center; box-shadow:0 0 0 2px var(--card-2) }
.scan-thumb-badge { position:absolute; right:-7px; top:-7px; width:22px; height:22px; border-radius:50%; color:#fff; font-size:12px; font-weight:800;
  line-height:22px; text-align:center; display:none; box-shadow:0 0 0 2px var(--card-2) }
.scan-thumb.lv-ok .scan-thumb-badge { display:block; background:#16a34a }
.scan-thumb.lv-warn .scan-thumb-badge { display:block; background:#d97706 }
.scan-thumb.lv-retake .scan-thumb-badge, .scan-thumb.lv-error .scan-thumb-badge { display:block; background:#dc2626 }
.scan .scan-thumb.lv-retake, .scan .scan-thumb.lv-error { border-color:#dc2626 }
.scan-spin { display:none; position:absolute; inset:0; margin:auto; width:24px; height:24px; border-radius:50%;
  border:3px solid rgba(79,70,229,.22); border-top-color:#4f46e5; animation:scanspin .8s linear infinite }
.scan-thumb.lv-busy .scan-spin { display:block }
.scan-spin.big { display:block; position:static; width:36px; height:36px }
@keyframes scanspin { to { transform:rotate(360deg) } }
@media (prefers-reduced-motion: reduce) { .scan-spin { animation-duration:2.4s } .scan-flash.on { animation:none } .scan .scan-torch.suggest { animation:none } }
.scan .scan-done { flex:none; margin:8px 8px calc(8px + env(safe-area-inset-bottom)); min-height:70px; padding:6px 2px; border-radius:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; background:var(--accent); border-color:var(--accent); color:#fff; font-weight:700; line-height:1.15 }
.scan .scan-done:hover { background:var(--accent-2) }
.scan .scan-done:disabled { opacity:.4 }
.scan-done.busy { cursor:progress; opacity:.75 }
.scan-done-check { font-size:24px; line-height:1 }
.scan-done-count { font-size:11px; font-weight:500; opacity:.9 }
.scan-done-songs { font-size:11px; font-weight:700 }
/* en skanning är en låt: "✂ Ny låt från den här sidan" lägger en avdelare före sidan */
.scan-break { flex:none; width:70px; margin:0 0 -6px; padding-top:6px; border-top:2px dashed var(--accent); color:var(--accent);
  font-size:11px; font-weight:700; line-height:1.2; text-align:center }
/* efter Klar: "Skanna nästa låt" eller "Stäng" över kamerabilden */
.scan-next { position:absolute; inset:0; z-index:5; display:flex; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.92) }
.scan-next-card { width:100%; max-width:340px; display:flex; flex-direction:column; align-items:stretch; gap:12px; text-align:center }
.scan-next-text { margin:0 0 6px; color:#fff; font-size:16px; line-height:1.4 }
.scan-next .pill { min-height:48px; font-size:15px }
.scan-next button.pill:not(.primary) { background:#1c1f27; border-color:rgba(255,255,255,.35); color:#fff }
/* "Välj fil i stället": en länk, inte en knapp – i skannerns överkant så länge inga sidor är tagna, och i nästa-kortet */
.scan .scan-link { background:none; border:none; padding:8px 6px; color:#fff; opacity:.9; font-size:14px; text-decoration:underline; text-underline-offset:3px }
.scan .scan-link:hover { background:none; opacity:1 }
.scan-next .scan-link { align-self:center; margin-top:2px }

/* stor sidvy och hörnjustering */
.scan-view { position:absolute; inset:0; z-index:3; display:flex; justify-content:center; padding:calc(10px + env(safe-area-inset-top)) 10px calc(10px + env(safe-area-inset-bottom));
  background:rgba(0,0,0,.62); color:var(--ink) }
.scan-view-card { width:100%; max-width:680px; min-height:0; display:flex; flex-direction:column; background:var(--card); border-radius:16px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.45) }
.scan-view-head { position:relative; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:4px; padding:4px 6px; border-bottom:1px solid var(--line) }
.scan-view-title { grid-column:2; text-align:center; white-space:nowrap }
/* tillbaka till kameran: stor tryckyta, accentfärg och pil – det man letar efter uppe till vänster (Erik 2026-10-16) */
.scan-view-back { grid-column:1; justify-self:start; display:inline-flex; align-items:center; gap:2px; min-height:44px; padding:0 12px 0 4px; border:none; border-radius:10px; background:transparent; color:var(--accent); font-size:16px; font-weight:600; cursor:pointer }
.scan-view-back svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round }
.scan-view-back:hover { background:var(--hover) }
.scan-view-more { grid-column:3; justify-self:end; width:44px; height:44px; padding:0; border:none; border-radius:50%; background:transparent; color:var(--ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer }
.scan-view-more svg { width:24px; height:24px; fill:currentColor; stroke:none }
.scan-view-more:hover, .scan-view-more[aria-expanded=true] { background:var(--hover) }
.scan-view-back:focus-visible, .scan-view-more:focus-visible { outline:3px solid var(--accent); outline-offset:1px }
.scan-view-menu { position:absolute; top:calc(100% + 4px); right:8px; z-index:5; min-width:200px; display:flex; flex-direction:column; padding:6px; background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 30px rgba(0,0,0,.3) }
.scan-view-menu.hidden { display:none }
.scan-view-menu button { min-height:44px; padding:0 12px; border:none; border-radius:8px; background:transparent; text-align:left; font-size:15px; color:var(--ink) }
.scan-view-menu button:hover:not(:disabled) { background:var(--hover) } .scan-view-menu button:disabled { opacity:.4 }
.scan-view-menu button.danger { color:#b91c1c; border-top:1px solid var(--line); border-radius:0 0 8px 8px; margin-top:4px }
.scan-view-body { position:relative; flex:1; min-height:120px; display:flex; align-items:center; justify-content:center; padding:12px; background:var(--bg); overflow:hidden }
.scan-view-img { display:flex; align-items:center; justify-content:center; width:100%; height:100%; min-height:0 }
.scan-view-img img, .scan-view-img canvas { display:block; max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; background:#fff; box-shadow:var(--shadow); border-radius:4px }
.scan-view-none svg { display:block; width:56px; height:56px; fill:none; stroke:var(--muted); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.scan-view-quality { padding:10px 16px 4px; border-top:1px solid var(--line); font-size:13px; max-height:34%; overflow:auto }
.scan-view-quality p { margin:0 0 6px; font-weight:600 }
.scan-q-head.lv-ok { color:#15803d } .scan-q-head.lv-retake, .scan-q-head.lv-error { color:#b91c1c } .scan-q-head.lv-warn { color:var(--jump-ink) } .scan-q-head.lv-busy { color:var(--muted) }
html[data-theme=dark] .scan-q-head.lv-ok { color:#4ade80 } html[data-theme=dark] .scan-q-head.lv-retake, html[data-theme=dark] .scan-q-head.lv-error { color:#f87171 }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) .scan-q-head.lv-ok { color:#4ade80 } html:not([data-theme=light]) .scan-q-head.lv-retake, html:not([data-theme=light]) .scan-q-head.lv-error { color:#f87171 } }
.scan-view-quality ul { margin:0 0 6px; padding-left:20px } .scan-view-quality li { margin:3px 0 }
.scan-view-quality li.lv-retake::marker { color:#dc2626 } .scan-view-quality li.lv-warn::marker { color:#d97706 }
.scan-view-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 12px 12px; border-top:1px solid var(--line) }
.scan-view-actions button { min-height:44px; flex:1 1 auto }
/* en tydlig huvudknapp: grön "Bra, nästa sida"; Ta om och hörnen under den */
.scan-view-main { flex-direction:column; align-items:stretch }
.scan-view-main .act-ok { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:54px; border:none; border-radius:12px; background:#16a34a; color:#fff; font-size:17px; font-weight:600 }
.scan-view-main .act-ok:hover { background:#15803d }
.scan-view-main .act-ok svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2.8; stroke-linecap:round; stroke-linejoin:round }
.scan-view-main .act-ok.weak { min-height:44px; border:1px solid var(--line); background:var(--card); color:var(--ink); font-size:15px; font-weight:500 }
.scan-view-main .act-ok.weak:hover { background:var(--hover) } .scan-view-main .act-ok.weak svg { width:18px; height:18px }
.scan-view-row { display:flex; gap:8px } .scan-view-row button { flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px }
.scan-view-row button svg { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.scan-view-main .act-ok.weak { order:2 } .scan-view-row { order:1 }
.scan-view-row .act-retake.primary { min-height:54px; font-size:17px }
.scan-edit-tip { flex:1 1 100% }
.scan-corners { position:relative; touch-action:none; flex:none }
.scan-corners img { display:block; width:100%; height:100%; -webkit-user-drag:none; pointer-events:none }
.scan-corners svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none }
.scan-corners polygon { fill:rgba(79,70,229,.16); stroke:#6366f1; stroke-width:2.5; vector-effect:non-scaling-stroke; stroke-linejoin:round }
.scan-handle { position:absolute; width:48px; height:48px; margin:-24px 0 0 -24px; border-radius:50%; touch-action:none; cursor:grab }
.scan-handle::after { content:""; position:absolute; inset:14px; border-radius:50%; background:#fff; border:3px solid #6366f1; box-shadow:0 1px 5px rgba(0,0,0,.45) }
.scan-handle.drag::after { inset:10px; background:#6366f1 }
.scan-loupe { position:absolute; width:96px; height:96px; border-radius:50%; border:3px solid #fff; box-shadow:0 4px 14px rgba(0,0,0,.5); background-color:#000; background-repeat:no-repeat; pointer-events:none; z-index:2 }
.scan-loupe::after { content:""; position:absolute; left:50%; top:50%; width:14px; height:14px; margin:-7px 0 0 -7px; border:2px solid #6366f1; border-radius:50% }

/* liggande telefon: avtryckaren i en kolumn till höger om videon, sidvyn i två spalter */
@media (orientation: landscape) and (max-height: 540px) {
  .scan-top { padding:calc(6px + env(safe-area-inset-top)) 10px 12px }
  .scan-controls { top:0; left:auto; bottom:0; flex-direction:column; justify-content:center; gap:18px; padding:10px 14px; background:linear-gradient(90deg, transparent, rgba(0,0,0,.55)) }
  .scan-bottom { bottom:10px; right:104px }
  .scan-thumbs { gap:12px; padding-top:10px }
  .scan-files { gap:10px; padding:14px 16px } .scan-files-icon svg { width:36px; height:36px } .scan-files .pill { min-height:44px }
  .scan .scan-done { min-height:58px }
  .scan-view-card { display:grid; grid-template-columns:minmax(0,1fr) minmax(220px, 280px); grid-template-rows:auto minmax(0,1fr) auto; max-width:none }
  .scan-view-head { grid-column:1 / -1 } .scan-view-body { grid-row:2 / 4; min-height:0 }
  .scan-view-quality { grid-column:2; max-height:none; border-left:1px solid var(--line) }
  .scan-view-actions { grid-column:2; border-left:1px solid var(--line) }
}
@media (max-width: 360px) { .scan { grid-template-columns:minmax(0,1fr) 76px } .scan .scan-thumb { width:56px } }
/* startsidan: en skanning som avbröts av en omladdning kan fortsätta */
.scan-resume { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:4px 14px; margin-top:10px }
.scan-resume .pill { min-height:44px }
.scan-resume .scan-resume-drop { min-height:44px; padding:0 10px; border:0; background:none; box-shadow:none }

/* ---- "Bad reading": godkännandet innan låten kopieras till supporten (dulynoted/support.py) */
dialog.dlg { width:min(520px, calc(100% - 32px)); max-height:calc(100% - 32px); overflow:auto; padding:20px 22px; border:1px solid var(--line);
  border-radius:var(--radius); background:var(--card); color:var(--ink); box-shadow:var(--shadow) }
dialog.dlg::backdrop { background:rgba(17,24,39,.45) }
dialog.dlg:not([open]) { display:none }   /* webbläsare utan <dialog> visar annars innehållet i sidan */
dialog.dlg[open] { position:fixed; inset:0; margin:auto; height:fit-content; z-index:60 }
dialog.dlg h2 { font-size:17px; margin:0 0 12px; outline:none }   /* fokus här, inte i textrutan: mobilens tangentbord skymmer annars texten */
dialog.dlg p { margin:0 0 10px; color:var(--ink-2); line-height:1.5 }
dialog.dlg .rd-sent { color:var(--ink); font-weight:600 }
dialog.dlg .rd-self { margin:0 0 12px; padding:8px 10px; border-radius:8px; background:var(--accent-soft); color:var(--ink); font-size:13px }
dialog.dlg .rd-label { display:block; font-size:12px; color:var(--muted); margin:14px 0 4px }
dialog.dlg textarea { display:block; width:100%; min-height:72px; resize:vertical; font:inherit; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:var(--card); color:var(--ink) }
dialog.dlg textarea:focus { outline:2px solid var(--accent-soft); border-color:var(--accent) }
dialog.dlg .rd-msg { margin:12px 0 0; color:var(--ink) } dialog.dlg .rd-msg.err { color:#b91c1c }
.dlg-buttons { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:16px } .dlg-buttons .grow { flex:1 }
html[data-theme=dark] dialog.dlg .rd-msg.err { color:#f87171 }
@media (prefers-color-scheme: dark) { html:not([data-theme=light]) dialog.dlg .rd-msg.err { color:#f87171 } }
@media (max-width: 600px) { dialog.dlg { padding:16px } .dlg-buttons button:not(.small) { flex:1 } }

/* ---- "Hjälp oss läsa bättre": var felet sitter (static/report-marks.js) – orange, skild från spelhuvudet (indigo) och loopen (grön) */
.rd-where p { margin:0 0 6px }
.rd-marks { list-style:none; margin:6px 0 8px; padding:0; display:flex; flex-direction:column; gap:6px }
.rd-marks:empty { display:none }
.rd-marks li { display:flex; align-items:center; gap:8px }
.rd-marks .rd-mlabel { white-space:nowrap; font-size:13px; color:var(--ink) }
.rd-marks input { flex:1; min-width:0; font-size:13px; padding:5px 8px }
.rd-marks button { padding:4px 9px; color:var(--muted) }
.umark-n { display:inline-block; flex:none; min-width:20px; height:20px; padding:0 4px; border-radius:10px; background:#ea580c; color:#fff;
  font-size:11px; font-weight:700; line-height:20px; text-align:center; font-variant-numeric:tabular-nums }
.page .markpad { position:absolute; inset:0; z-index:3; cursor:crosshair; -webkit-touch-callout:none; -webkit-user-select:none; user-select:none;
  touch-action:none; touch-action:pinch-zoom }   /* ett finger ritar, två rullar/zoomar; utan stöd för pinch-zoom gäller none */
.page .umark { position:absolute; z-index:4; display:none; box-sizing:border-box; border:2px solid #ea580c; border-radius:4px;
  background:rgba(234,88,12,.13); pointer-events:none }
.pages.showumarks .umark, .page .umark.band { display:block }
.page .umark.band { border-style:dashed; background:rgba(234,88,12,.08) }
.page .umark .umark-n { position:absolute; top:2px; left:2px }
.page .umark .umark-x { display:none; position:absolute; top:2px; right:2px; width:26px; height:26px; padding:0; border-radius:13px; border:none;
  background:#ea580c; color:#fff; font-size:13px; line-height:26px; pointer-events:auto }
body.marking .page .umark .umark-x { display:block }
.pages.showumarks .chart .mm.umarked { background:rgba(234,88,12,.16); box-shadow:inset 0 0 0 2px #ea580c; border-radius:4px }
.pages.showumarks .chart .mm.umarked::before { content:attr(data-umark); margin-right:4px; color:#ea580c; font-weight:700 }
.markbar { position:fixed; left:0; right:0; top:0; z-index:45; display:none; align-items:center; gap:12px;
  padding:10px 16px; padding-top:calc(10px + env(safe-area-inset-top)); background:var(--card); color:var(--ink);
  border-bottom:3px solid #ea580c; box-shadow:var(--shadow) }
body.marking .markbar { display:flex }
.markbar-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; font-size:13px; line-height:1.35 }
.markbar-text [data-hint] { color:var(--ink-2) }
.markbar-count { color:#ea580c; font-weight:600 } .markbar-count:empty { display:none }
.markbar button { flex:none; min-height:40px; padding:0 22px }
@media (pointer: coarse) { .page .umark .umark-x { width:32px; height:32px; border-radius:16px; line-height:32px }
  .rd-marks input { font-size:16px } .rd-marks button { min-width:40px; min-height:40px } }   /* under 16 px zoomar Safari på iPhone in vid fokus */

/* inloggning (DULY_AUTH=app) */
.card.login { max-width:440px; margin-top:24px }
.login-form { margin:14px 0 } .login-form label { display:block; font-size:13px; color:var(--muted); margin-bottom:4px }
.login-form input { display:block; width:100%; box-sizing:border-box; font:inherit; font-size:16px; padding:10px 12px; margin:0 0 12px;
  border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink) }
.login-form input:focus { outline:2px solid var(--accent-soft); border-color:var(--accent) }
.login-form input.code-input { font-size:24px; letter-spacing:.3em; font-variant-numeric:tabular-nums; max-width:220px }
.login-form .cf-turnstile { margin:0 0 12px }
.login-resend button.small { margin:0 2px }
.logout-form { display:inline; margin:0 } .logout-form button.navlink { border:0; background:none; cursor:pointer; font:inherit; font-size:13px }
.logout-form button.linkbtn { border:0; background:none; padding:0; color:var(--accent); font:inherit; cursor:pointer } .logout-form button.linkbtn:hover { text-decoration:underline }
/* kontosidan (/account) */
.card.account { max-width:600px; margin-top:24px } .card.account h2 { margin-top:22px }
.account-delete { padding-left:20px } .account-delete li { font-size:14px; line-height:1.5; margin:4px 0 }
/* gratisnivån: låsta reglage (app.js) och raden om gratislåten i biblioteket */
label.locked { cursor:pointer } label.locked input { pointer-events:none; opacity:.45 }
label.locked::after, button.locked::after { content:" 🔒"; font-size:11px }
.freenote { margin:8px 0 0; padding:8px 12px; border-radius:10px; background:var(--accent-soft); font-size:14px }
.freenote.used { background:var(--warn-bg); border:1px solid var(--warn-line) }
td.status.locked { color:var(--muted); white-space:nowrap }
dialog.buydlg .plans { margin:14px 0 6px } dialog.buydlg .plan { padding:12px 14px; flex-basis:140px } dialog.buydlg .plan .price { font-size:26px }
dialog.buydlg .plan p { margin:4px 0 0 } dialog.buydlg .buy-reason { color:var(--ink); font-weight:600 }