:root{
  --bg:#0b1220;
  --card:#0f1a31;
  --muted:#93a4c7;
  --text:#e9eefc;
  --accent:#6ee7b7;
  --danger:#fb7185;
  --border:rgba(255,255,255,.10);
  --shadow: 0 14px 40px rgba(0,0,0,.35);
  --radius: 18px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

/* iOS/Safari: håll textstorlek stabil + minska konstiga zoom/resize-effekter */
html{
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;

  /* Lås bakgrunden – inga läckande lager */
  background: var(--bg);

  color:var(--text);

  /* VIKTIGT: stoppa bakgrund från att synas bakom fixed elements */
  overflow-x: hidden;
}

.shell{
  max-width: 560px;
  margin: 0 auto;
  padding: 18px 14px 24px;

  display:flex;
  min-height:100vh;
  flex-direction:column;
  gap:16px;

  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(110,231,183,.18), transparent 60%),
    radial-gradient(900px 600px at 20% 10%, rgba(99,102,241,.18), transparent 60%);
}

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

.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width:44px;height:44px;
  border-radius:14px;
  display:grid;place-items:center;
  background: rgba(110,231,183,.18);
  border: 1px solid var(--border);
  color: var(--accent);
  font-weight:900;
  letter-spacing:.5px;
}

.brand-name{ font-size: 18px; font-weight: 900; }
.brand-sub{ font-size: 12px; color: var(--muted); margin-top:2px; }

.card{
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px;
}

h1{ font-size: 20px; margin: 0 0 8px; }
p{ margin: 0 0 12px; color: var(--muted); line-height: 1.55; }

.row{ display:flex; gap:10px; flex-wrap:wrap; }
.gap8{ gap:8px; }

.btn{
  cursor:pointer;
  border:1px solid var(--border);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  font-weight: 800;
  width:100%;
  -webkit-tap-highlight-color: transparent;
}
.btn.primary{
  background: rgba(110,231,183,.18);
  border-color: rgba(110,231,183,.45);
  color: #d9fff1;
}
.btn.danger{
  background: rgba(251,113,133,.12);
  border-color: rgba(251,113,133,.45);
}
.btn.small{
  padding:10px 12px;
  width:auto;
  font-weight:800;
}

/* ✅ Disabled state: viktigt för arkiv/duplicate/check i read-only */
.btn:disabled,
button:disabled,
.checkbtn:disabled,
.navbtn:disabled{
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

/* ✅ iOS: förhindra “zoom in” när man fokuserar input (kräver >=16px) */
.input,
input,
textarea,
select{
  font-size: 16px;
}

.input{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.22);
  color: var(--text);
  outline:none;
  -webkit-appearance: none;
  appearance: none;
}
.input::placeholder{ color: rgba(147,164,199,.7); }

/* ✅ Lite tydligare focus (bra för arkivsök) */
.input:focus{
  border-color: rgba(110,231,183,.55);
  box-shadow: 0 0 0 3px rgba(110,231,183,.10);
}

.label{
  font-size: 12px;
  color: var(--muted);
  margin: 10px 0 6px;
  font-weight: 700;
}

.hr{ height:1px; background: var(--border); margin: 14px 0; }

.badge{
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--muted);
  font-size: 12px;
  font-weight:700;
}
.badge.ok{ color: var(--accent); border-color: rgba(110,231,183,.45); }
.badge.err{ color: var(--danger); border-color: rgba(251,113,133,.45); }

.notice{
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(0,0,0,.18);
  color: var(--muted);
}

.muted{ color: var(--muted); }
.footer{ padding: 2px; text-align:center; }

.codebox{
  width:100%;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  color: rgba(233,238,252,.9);
  background: rgba(0,0,0,.25);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
}

/* ✅ Bottom nav: FIX för den “ljusa overlay-baren” på iOS (sticky+backdrop-filter bugg)
   Byt sticky → fixed, ge egen layer + safe-area. */
.bottomnav{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));
  bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  z-index: 120;

  display:flex;
  gap:10px;
  justify-content:space-between;
  padding: 10px;

  border-radius: 18px;
  border: 1px solid var(--border);

  /* HELT solid */
  background: #0f1a31;

  /* Tight shadow, ingen glow */
  box-shadow: 0 8px 18px rgba(0,0,0,.45);

  backdrop-filter: none;
}

.navbtn{
  flex:1;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  color: var(--text);
  border-radius: 16px;
  padding: 10px 8px;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  font-weight:800;
  -webkit-tap-highlight-color: transparent;
}

.navbtn.active{
  border-color: rgba(110,231,183,.55);
  background: rgba(110,231,183,.14);
}

.navicon{
  width:28px;height:28px;
  border-radius: 10px;
  display:grid;place-items:center;
  border:1px solid var(--border);
  background: rgba(0,0,0,.18);
  font-weight:900;
}

.navlabel{
  font-size: 11px;
  color: var(--muted);
}

/* ✅ Se till att innehåll inte hamnar bakom fixed bottomnav + actionbar */
.appwrap{
  padding-bottom: 220px; /* bottomnav + actionbar + safe-area */
}

/* ---------------- Fixed action bar (Mark as completed + Reload) ---------------- */

/* Full-bleed container men centrerad mot din “shell”-bredd */
/* ---------------- Fixed action bar (Mark as completed + Reload) ---------------- */

.actionbar{
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 28px));

  /* MER LUFT: flytta upp baren lite från bottomnav */
  bottom: calc(112px + env(safe-area-inset-bottom, 0px));

  z-index: 110; /* under bottomnav (120) men över allt annat */
  background: transparent;
  pointer-events: none;
}

.actionbar-inner{
  pointer-events: auto;

  display:flex;
  gap:10px;

  /* lite tightare + “pill”-känsla */
  padding: 8px;
  border-radius: 18px;

  border: 1px solid var(--border);
  background: #0f1a31;
  box-shadow: 0 10px 24px rgba(0,0,0,.50);

  backdrop-filter: none;
}

/* två knappar bredvid varandra */
.actionbar-inner .btn{
  width: auto;
  flex: 1;

  /* lite mindre höjd så det känns som en toolbar */
  padding: 11px 14px;
  border-radius: 16px;
}

/* två knappar bredvid varandra */
.actionbar-inner .btn{
  width: auto;
  flex: 1;
}

/* ---------------- Compact list items (en rad, liten check till höger) ---------------- */

.itemrow{
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.04);
  box-shadow: 0 10px 30px rgba(0,0,0,.22);
  margin-bottom: 10px;
}

.itemrow .left{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width: 0;
}

.itemrow .name{
  font-weight: 900;
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itemrow .meta{
  font-size: 12px;
  color: var(--muted);
  overflow:hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.itemrow.checked .name{
  text-decoration: line-through;
  opacity: .75;
}

.checkbtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(110,231,183,.45);
  background: rgba(110,231,183,.14);
  color: #d9fff1;
  font-weight: 900;
  cursor:pointer;
  flex: 0 0 auto;
  display:grid;
  place-items:center;
  -webkit-tap-highlight-color: transparent;
}

.checkbtn.off{
  border-color: var(--border);
  background: rgba(255,255,255,.04);
  color: var(--muted);
}

/* lite mer “appkänsla” på touch */
button, .btn, .navbtn, .checkbtn{
  touch-action: manipulation;
}

/* iOS/Safari: backdrop-filter kan skapa en ful ljus remsa vid scroll.
   Om något annat element råkar ha blur/backdrop-filter, stäng av här. */
@supports (-webkit-touch-callout: none) {
  .bottomnav,
  .actionbar-inner{
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

/* ---------------- Check interaction polish ---------------- */

/* Mjuk transition på raden + “pop” när man checkar */
.itemrow{
  transition: transform 120ms ease, opacity 120ms ease, border-color 180ms ease, background 180ms ease;
  will-change: transform;
}

/* Klass som app.js lägger på i 250ms */
.itemrow.just-checked{
  transform: scale(0.99);
}

/* När den är checked: lite mer “klar” känsla utan att bli grå */
.itemrow.checked{
  border-color: rgba(110,231,183,.22);
  background: rgba(110,231,183,.06);
}

/* Strykningen finns redan, men ge lite mer “done”-känsla */
.itemrow.checked .name{
  opacity: .70; /* du har .75 – lite lugnare */
}

/* Knappen: snabb och tydlig micro-interaction */
.checkbtn{
  transition: transform 120ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease;
  will-change: transform;
}

/* “Tryck ner” på touch */
.checkbtn:active{
  transform: scale(0.92);
}

/* Liten glow när man checkar (lugnt, inte neon) */
.itemrow.checked .checkbtn{
  box-shadow: 0 8px 18px rgba(110,231,183,.12);
}

/* När off: se lite mer “tappbar” ut men fortfarande diskret */
.checkbtn.off{
  box-shadow: none;
}

/* Subtle row press (tap feedback) */
.itemrow:active{
  transform: scale(0.995);
}

/* ---------------- Global tap/click feel ---------------- */

/* Mjukare micro-interactions på knappar */
.btn, .navbtn, .checkbtn{
  transition: transform 120ms ease, box-shadow 180ms ease, border-color 180ms ease, background 180ms ease, opacity 120ms ease;
  will-change: transform;
}

/* “Tryck ner” vid klick (desktop + mobil) */
.btn:active, .navbtn:active{
  transform: scale(0.985);
}

/* Lite tydligare hover på desktop (inte på touch) */
@media (hover:hover) and (pointer:fine){
  .btn:hover, .navbtn:hover, .checkbtn:hover{
    border-color: rgba(255,255,255,.18);
    box-shadow: 0 10px 26px rgba(0,0,0,.30);
  }

  .btn.primary:hover{
    border-color: rgba(110,231,183,.65);
    box-shadow: 0 10px 26px rgba(110,231,183,.10);
  }

  .btn.danger:hover{
    border-color: rgba(251,113,133,.65);
    box-shadow: 0 10px 26px rgba(251,113,133,.10);
  }
}

/* Fokus-ring när man tabbar med tangentbord (accessibility + premium-feel) */
.btn:focus-visible,
.navbtn:focus-visible,
.checkbtn:focus-visible,
.input:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(110,231,183,.18);
  border-color: rgba(110,231,183,.55);
}