/* Arrenge — appens utseende. Hör ihop med kalenderapp.html och app.js. */
  :root{
    --ink-bg:#1B2430;
    --ink-bg-alt:#1F2A38;
    --card:#26313F;
    --card-raised:#2C3848;
    --paper:#ECE4D3;
    --muted:#93A2B2;
    --accent:#D8A24A;
    --accent-rgb:216,162,74; /* samma färg som --accent, för rgba(var(--accent-rgb), x) */
    --on-accent:#20180a;     /* text/ikon ovanpå accentfärgen */
    --accent-soft:rgba(216,162,74,0.16);
    --green:#5FA777;
    --green-soft:rgba(95,167,119,0.18);
    --yellow:#E0B94D;
    --yellow-soft:rgba(224,185,77,0.18);
    /* Egen, dedikerad variabel bara för kalenderns dagceller — så att just
       DEN gula tonen kan vara samma i båda temana, utan att påverka --yellow
       på andra ställen (t.ex. förklarings-punkten), där den mer avdämpade
       tonen i ljust tema är medvetet vald för läsbarhet där. */
    --calendar-yellow:#E0B94D;
    --red:#D9614F;
    --red-soft:rgba(217,97,79,0.18);
    --border:rgba(236,228,211,0.10);
    --border-strong:rgba(236,228,211,0.18);
    --shadow:0 12px 28px rgba(0,0,0,0.35);
  }
  /* Ljust tema — samma variabler, varma ljusa motsvarigheter istället för
     mörka. Något djupare toner på accent/gul/grön/röd än vad man kanske
     först skulle gissa — annars blir de urblekta och svårlästa mot en ljus
     bakgrund (fungerar helt annorlunda än mot den mörka bakgrunden de
     ursprungligen valdes för). Aktiveras genom att lägga klassen
     "light-theme" på <body> — allt annat i appen använder redan bara
     var(...)-referenser, så det räcker att byta ut värdena här. */
  body.light-theme{
    --ink-bg:#F7F2E7;
    --ink-bg-alt:#F0E9DA;
    --card:#FFFFFF;
    --card-raised:#F5F0E6;
    --paper:#2B2318;
    --muted:#7A6F5E;
    --accent:#B8823A;
    --accent-rgb:184,130,58;
    --accent-soft:rgba(184,130,58,0.14);
    --green:#3F8259;
    --green-soft:rgba(63,130,89,0.14);
    --yellow:#A67F2E;
    --yellow-soft:rgba(166,127,46,0.14);
    --calendar-yellow:#E0B94D;
    --red:#B84636;
    --red-soft:rgba(184,70,54,0.14);
    --border:rgba(43,35,24,0.08);
    --border-strong:rgba(43,35,24,0.16);
    --shadow:0 12px 28px rgba(43,35,24,0.10);
  }
  /* Lila tema — mörk, djupt lila bakgrund med ljuslila accent. Samma
     variabler som övriga teman; aktiveras med klassen "purple-theme". */
  body.purple-theme{
    --ink-bg:#1A1426;
    --ink-bg-alt:#20182F;
    --card:#2A2140;
    --card-raised:#33284D;
    --paper:#EFE9F8;
    --muted:#A698C2;
    --accent:#B48CF2;
    --accent-rgb:180,140,242;
    --on-accent:#1C1030;
    --accent-soft:rgba(180,140,242,0.18);
    --green:#6DBB8A;
    --green-soft:rgba(109,187,138,0.18);
    --yellow:#E3C05B;
    --yellow-soft:rgba(227,192,91,0.18);
    --calendar-yellow:#E3C05B;
    --red:#E0697F;
    --red-soft:rgba(224,105,127,0.18);
    --border:rgba(239,233,248,0.10);
    --border-strong:rgba(239,233,248,0.18);
    --shadow:0 12px 28px rgba(0,0,0,0.40);
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;overscroll-behavior-y:contain;}
  html{
    /* Stänger av Android WebViews inbyggda "textförstoring" — en
       tillgänglighetsfunktion som annars kan förstora VÄLDIGT liten text
       (som badgen med antal klara nedan) olika mycket beroende på
       tillverkarens egen Chrome/WebView-variant. Utan den här raden kan
       exakt samma CSS se olika ut på t.ex. Samsung kontra Motorola,
       eftersom de kan ha olika aggressiva versioner av den funktionen. */
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
  }
  body{
    background:var(--ink-bg);
    color:var(--paper);
    font-family:'Inter',sans-serif;
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  #app{
    max-width:520px;
    margin:0 auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    position:relative;
    padding-bottom:86px;
  }
  /* Surfplattor och datorer i liggande läge får samma liggande layout
     som mobiler (sidomeny, bred hemskärm) — se media-frågorna nedan med
     "(orientation:landscape) and (min-width:700px) and (pointer:coarse)". */
  @media (orientation:landscape) and (min-width:1400px) and (pointer:coarse){
    /* Stora skärmar: håll innehållet i en läsbar bredd */
    #app{ max-width:1240px !important; margin:0 auto; }
  }
  h1,h2,h3{font-family:'Fraunces',serif;margin:0;font-weight:600;}
  header.top{
    padding:22px 12px 10px 12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:12px;
  }
  header.top .brand{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1;}
  header.top .brand h1{font-size:17px;letter-spacing:0.01em;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .header-search-btn{
    position:relative;
    flex-shrink:0;
    width:38px;height:38px;border-radius:11px;
    background:var(--card);border:1px solid var(--border-strong);
    color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
  }
  .top-menu-backdrop{ position:fixed; inset:0; z-index:70; background:transparent; }
  .top-menu-dropdown{
    position:absolute; top:66px; right:20px; z-index:71;
    background:var(--card); border:1px solid var(--border-strong); border-radius:14px;
    box-shadow:var(--shadow);
    display:flex; flex-direction:column; overflow:hidden;
    min-width:190px;
    animation:topMenuPop 0.12s ease-out;
  }
  @keyframes topMenuPop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:translateY(0); } }
  .top-menu-item{
    background:none; border:none; text-align:left; padding:13px 16px;
    font-size:14px; color:var(--paper); cursor:pointer;
    border-bottom:1px solid var(--border);
    display:flex; align-items:center; gap:12px;
  }
  .top-menu-item-icon{ display:flex; flex-shrink:0; color:var(--muted); }
  .top-menu-item-icon svg{ width:17px; height:17px; }
  .top-menu-item:last-child{ border-bottom:none; }
  .top-menu-item:active{ background:var(--ink-bg-alt); }
  .header-search-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .header-search-btn svg{width:17px;height:17px;}
  .app-icon-mini{
    position:relative;
    width:34px;height:32px;
    flex-shrink:0;
  }
  .app-icon-mini-letter{
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);
  }
  main{flex:1;padding:0 10px 20px 10px;} /* 10 px från kanterna (var 20) — som andra appar, mer plats åt rubriker */
  .storage-warning{
    margin:0 10px 14px 10px;
    background:var(--yellow-soft);
    border:1px solid rgba(224,185,77,0.4);
    color:var(--paper);
    font-size:12.5px;
    line-height:1.5;
    padding:12px 14px;
    border-radius:12px;
  }
  .storage-warning-actions{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;}
  .storage-warning-btn{
    background:var(--card-raised);border:1px solid var(--accent);color:var(--accent);
    font-weight:700;font-size:13px;padding:8px 16px;border-radius:9px;cursor:pointer;min-height:38px;
  }
  .storage-warning-btn.primary{background:var(--accent);color:var(--on-accent);}
  .storage-warning-dismiss{
    background:none;border:none;
    color:var(--accent);
    font-weight:600;
    font-size:12.5px;
    padding:0;
    cursor:pointer;
    text-decoration:underline;
  }
  .alerts-stack{margin:0 20px 14px 20px;display:flex;flex-direction:column;gap:8px;}

  .pull-refresh-indicator{
    position:fixed;
    top:-60px;
    left:50%;
    transform:translateX(-50%);
    z-index:200;
    background:var(--card-raised);
    border:1px solid var(--border-strong);
    border-radius:999px;
    padding:9px 16px;
    display:flex;
    align-items:center;
    gap:8px;
    box-shadow:var(--shadow);
    opacity:0;
    pointer-events:none;
  }
  .pull-refresh-indicator.resetting{ transition: top .25s ease, opacity .25s ease; }
  .pull-refresh-spinner{
    width:15px;height:15px;
    border:2px solid var(--border-strong);
    border-top-color:var(--accent);
    border-radius:50%;
    flex-shrink:0;
  }
  .pull-refresh-spinner.spin{ animation: pullSpin .7s linear infinite; }
  @keyframes pullSpin{ to{ transform:rotate(360deg); } }
  @keyframes pulse{ 0%,100%{ transform:scale(1); opacity:1; } 50%{ transform:scale(1.08); opacity:0.75; } }
  .pull-refresh-text{ font-size:12.5px; color:var(--paper); font-family:'Inter',sans-serif; font-weight:600; white-space:nowrap; }
  .alert-banner{
    display:flex;align-items:center;justify-content:space-between;
    gap:10px;
    background:var(--accent);
    color:var(--on-accent);
    border-radius:12px;
    padding:12px 14px;
    box-shadow:0 8px 20px rgba(var(--accent-rgb),0.35);
    animation:alertPop .3s ease;
  }
  @keyframes alertPop{from{opacity:0;transform:translateY(-8px) scale(0.98);}to{opacity:1;transform:translateY(0) scale(1);}}
  .alert-banner-text{display:flex;flex-direction:column;gap:2px;min-width:0;}
  .alert-banner-text b{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .alert-banner-text span{font-family:'IBM Plex Mono',monospace;font-size:11px;opacity:0.75;}
  .alert-banner-actions{display:flex;gap:6px;flex-shrink:0;}
  .alert-done-btn{
    background:var(--on-accent);color:var(--accent);
    border:none;border-radius:8px;
    font-weight:700;font-size:12px;
    padding:8px 12px;cursor:pointer;
  }
  .alert-dismiss-btn{
    background:rgba(32,24,10,0.15);color:var(--on-accent);
    border:none;border-radius:8px;
    font-weight:700;font-size:13px;
    width:32px;cursor:pointer;
  }
  .fade-in{animation:fadeIn .28s ease;}
  @keyframes fadeIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}}

  /* ---- Today card ---- */
  .today-row{display:flex;gap:10px;align-items:stretch;margin-bottom:26px;}
  .today-card{
    position:relative;
    background:linear-gradient(160deg,var(--card-raised),var(--card));
    border:1px solid var(--border-strong);
    border-radius:18px;
    padding:34px 22px 32px 22px;
    box-shadow:var(--shadow);
    overflow:hidden;
    flex:1;
    min-width:0;
  }
  .home-quick-badge{
    position:absolute;top:-5px;right:-5px;
    background:var(--accent);color:var(--on-accent);
    font-size:9px;font-weight:700;
    min-width:15px;height:15px;border-radius:999px;
    display:flex;align-items:center;justify-content:center;
    padding:0 3px;
  }
  .home-quick-badge-offline{
    background:var(--muted);color:var(--card);
    font-size:12px;
  }
  .today-card::after{
    content:'';
    position:absolute;
    top:14px; right:-34px;
    width:120px; height:26px;
    background:var(--accent);
    transform:rotate(40deg);
    box-shadow:0 3px 8px rgba(0,0,0,0.3);
  }
  .today-stamp{
    position:absolute; top:14px; right:-34px;
    width:120px; height:26px;
    display:flex; align-items:center; justify-content:center;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; font-weight:600;
    letter-spacing:0.12em;
    color:#1B2430;
    transform:rotate(40deg);
    z-index:2;
  }
  .today-weekday{color:var(--muted);font-size:14px;margin-bottom:2px;}
  .today-num-row{display:flex;align-items:flex-end;gap:12px;}
  .today-num{font-size:72px;line-height:0.85;color:var(--paper);font-weight:600;}
  .today-month{font-size:16px;color:var(--muted);padding-bottom:8px;}
  .today-sub{margin-top:14px;font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px;}
  .today-right-col{ display:flex; flex-direction:column; align-items:center; gap:8px; }
  .today-timer-badge{
    display:flex; align-items:center; gap:5px;
    background:var(--card); border:1px solid var(--border-strong);
    border-radius:999px; padding:5px 10px;
    font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:600;
    color:var(--accent);
    cursor:pointer;
  }
  .today-timer-badge svg{ width:12px; height:12px; flex-shrink:0; }
  .today-sub b{color:var(--paper);font-weight:600;}
  .all-done-check{
    display:inline-flex;
    align-items:center;justify-content:center;
    width:17px;height:17px;
    border-radius:50%;
    background:var(--green);
    flex-shrink:0;
  }
  .all-done-check svg{width:10px;height:10px;}

  /* ---- Section headers ---- */
  .section-title{
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:0.09em;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    margin:22px 2px 10px 2px;
  }
  .date-group-label{
    font-size:12px;
    color:var(--accent);
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.06em;
    margin:18px 4px 8px 4px;
  }
  .date-group-label:first-child{margin-top:0;}
  .date-group-label.overdue{color:var(--red);}

  /* ---- Reminder / ticket rows ---- */
  .reminder-row{
    position:relative;
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--card);
    border-radius:12px;
    padding:12px 12px 12px 12px;
    margin-bottom:9px;
    cursor:pointer;
    border:1px solid var(--border);
  }
  .reminder-row::before,.reminder-row::after{
    content:'';
    position:absolute; left:-8px;
    width:16px;height:16px;border-radius:50%;
    background:var(--ink-bg);
  }
  .reminder-row::before{top:-8px;}
  .reminder-row::after{bottom:-8px;}
  .status-bar{
    width:5px;
    align-self:stretch;
    border-radius:4px;
    background:var(--border-strong);
    flex-shrink:0;
  }
  .status-bar.green{background:var(--green);}
  .status-bar.yellow{background:var(--calendar-yellow);}
  .status-bar.red{background:var(--red);}
  .status-bar.no-checkoff{background:var(--muted);opacity:0.35;}
  .check.no-checkoff-icon{border:none;color:var(--muted);cursor:default;opacity:0.85;}
  .check.no-checkoff-icon svg{width:17px;height:17px;display:block !important;opacity:1 !important;visibility:visible !important;stroke:currentColor;}
  /* Importerade kalenderhändelser (skrivskyddade) */
  .status-bar.imported{background:var(--muted);opacity:0.55;}
  .imported-cal-icon{flex-shrink:0;width:24px;height:24px;color:var(--muted);display:flex;align-items:center;justify-content:center;opacity:0.85;}
  .imported-cal-icon svg{width:18px;height:18px;}
  .imported-row .row-time{font-style:italic;}
  .app-version-footer{
    margin:22px 0 6px;text-align:center;
    font-family:'IBM Plex Mono',monospace;font-size:11.5px;line-height:1.7;color:var(--muted);opacity:0.85;
  }
  .app-version-behind{color:var(--accent);}
  .btn.save-confirmed{ color:var(--green); border-color:var(--green); font-weight:700; }
  .beta-tag{
    display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
    background:var(--accent-soft);color:var(--accent);border:1px solid rgba(var(--accent-rgb),0.35);
    font-family:'Inter',sans-serif;font-size:10px;font-weight:700;letter-spacing:0.04em;
    text-transform:uppercase;vertical-align:1px;
  }
  .imported-dot{position:absolute;left:50%;bottom:5px;transform:translateX(-50%);width:5px;height:5px;border-radius:50%;background:var(--muted);opacity:0.8;}
  .imported-view-when{font-size:14px;color:var(--paper);margin:-4px 0 12px;}
  .imported-view-line{font-size:13.5px;color:var(--paper);margin-bottom:10px;}
  .imported-view-desc{font-size:13px;color:var(--muted);line-height:1.55;white-space:pre-wrap;max-height:40vh;overflow-y:auto;margin-bottom:12px;}
  .imp-notify-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .imp-notify-link{ display:inline-block; margin:4px 8px 0 0; padding:0; background:none; border:none; color:var(--accent); font-size:11.5px; font-weight:600; cursor:pointer; text-align:left; }
  .imported-view-source{font-size:12px;color:var(--muted);font-style:italic;border-top:1px solid var(--border);padding-top:10px;margin-bottom:4px;}
  .chore-row{
    display:flex;align-items:center;gap:12px;
    background:var(--card);border:1px solid var(--border);border-radius:12px;
    padding:12px;margin-bottom:8px;cursor:pointer;
  }
  .chore-row-body{flex:1;min-width:0;}
  .chore-row-title{font-size:14.5px;font-weight:500;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .chore-row-meta{font-size:11.5px;color:var(--muted);margin-top:2px;font-family:'IBM Plex Mono',monospace;}
  .chore-done-btn{flex:0 0 auto !important;padding:8px 12px;font-size:12px;}
  .check{
    width:22px;height:22px;border-radius:50%;
    border:2px solid var(--muted);
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    transition:border-color .15s;
  }
  .check.done{background:var(--green);border-color:var(--green);}
  .check svg{width:12px;height:12px;opacity:0;transition:opacity .1s;}
  .check.done svg{opacity:1;}
  /* Större i visningsvyerna specifikt (påminnelse/syssla) — där kryssen i
     dagsvyn och listrader ska förbli små och kompakta, men det här är
     sidans EGEN, enda knapp för att markera klar, värd att vara lätt att
     träffa och tydligt synas. */
  .toggle-row .check{width:34px;height:34px;border-width:2.5px;}
  .toggle-row .check svg{width:18px;height:18px;}
  .row-body{flex:1;min-width:0;}
  .row-title{flex:1;min-width:0;font-size:15px;font-weight:500;color:var(--paper);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .row-title.done{color:var(--muted);text-decoration:line-through;}
  .row-time{
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;color:var(--muted);
    margin-top:2px;
    letter-spacing:0.03em;
  }
  .row-title-line{display:flex;align-items:baseline;gap:7px;}
  .row-time-inline{
    flex-shrink:0;
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;color:var(--accent);
    letter-spacing:0.03em;
  }
  .chevron{color:var(--muted);flex-shrink:0;}

  .shared-with-tag{
    font-size:11px;color:var(--accent);
    margin-top:2px;
    font-family:'Inter',sans-serif;
  }
  .shared-icon{
    display:inline-flex;
    vertical-align:middle;
    margin-left:6px;
    color:var(--accent);
  }
  .shared-icon svg{width:13px;height:13px;}

  .friend-row{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap; /* en lång e-postadress (innan personen valt ett eget namn) fick annars knapparna att hamna utanför synligt område — bryter nu till en egen rad istället, ingen förändring för korta namn */
    row-gap:8px;
    padding:8px 0;
    font-size:13px;color:var(--paper);
    border-top:1px solid var(--border);
  }
  .friend-row > span{
    overflow-wrap:break-word; word-break:break-word; /* en lång, sammanhängande e-postadress (inga mellanslag att bryta vid annars) kunde annars bara rinna över kanten istället för att radbrytas */
    min-width:0; max-width:100%;
  }
  .friend-row:first-of-type{border-top:none;padding-top:10px;}
  .friend-row-actions{display:flex;gap:8px;align-items:center;}
  /* Vänförfrågningar — egen, avgränsad ruta per förfrågan istället för en
     rad som delar plats med knapparna. Löser två saker på en gång: en lång
     e-postadress (innan personen valt ett eget namn) får nu alltid gott om
     plats att visas i sin helhet, OCH utseendet blir konsekvent oavsett
     längd — en kort förfrågan ser likadan ut som en lång, istället för att
     den ena av misstag hamnar på en rad och den andra bryts till två. */
  .friend-request-card{
    border:1px solid var(--border); border-radius:12px;
    padding:10px 12px; margin-top:8px;
  }
  .friend-request-card:first-of-type{ margin-top:10px; }
  .friend-request-email{
    font-size:13px; color:var(--paper); margin-bottom:10px;
    overflow-wrap:break-word; word-break:break-word;
  }
  .friend-row-actions-full{ justify-content:flex-start; flex-wrap:wrap; }
  .friend-shared-row{
    padding:8px 0;
    border-top:1px solid var(--border);
  }
  .friend-shared-row:first-child{ border-top:none; padding-top:10px; }
  .friend-shared-row-title{
    font-size:13px; color:var(--paper);
    overflow-wrap:break-word; word-break:break-word;
  }
  .friend-shared-row-meta{
    font-size:11px; color:var(--muted); margin-top:2px;
  }
  /* Tom platshållar-rad — SAMMA HTML-struktur som en riktig rad (egen
     titel-rad + egen meta-rad), bara med osynligt innehåll (visibility:hidden,
     inte display:none — det senare skulle ta bort höjden helt). Webbläsaren
     räknar då garanterat fram EXAKT samma höjd som en riktig rad, oavsett
     typsnittets exakta mått — ett gissat fast pixelvärde (vad som fanns här
     tidigare) matchade aldrig helt exakt, vilket gjorde att rutan bytte
     storlek märkbart beroende på hur många riktiga rader en sida råkade ha. */
  .friend-shared-row-empty .friend-shared-row-title,
  .friend-shared-row-empty .friend-shared-row-meta{
    visibility:hidden;
  }
  .friend-shared-pager{
    display:flex; align-items:center; justify-content:center; gap:12px;
    padding:6px 0 2px 0;
  }
  .friend-shared-pager-btn{
    width:28px; height:28px; border-radius:50%;
    background:var(--card); border:1px solid var(--border-strong);
    color:var(--paper); font-size:15px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer;
  }
  .friend-shared-pager-btn:disabled{ opacity:0.35; cursor:default; }
  .friend-shared-pager-label{ font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
  .friend-row-actions .btn{padding:7px 12px;font-size:12px;flex:none;}
  .friend-nickname-input{
    background:transparent; border:none; border-bottom:1px dashed var(--border-strong);
    color:var(--paper); font-family:'Inter',sans-serif; font-size:13px;
    padding:4px 2px; flex:1; min-width:0; margin-right:10px;
  }
  .friend-nickname-input:focus{outline:none;border-bottom-color:var(--accent);}
  .friend-nickname-input::placeholder{color:var(--muted);}
  .schedule-view-switcher{
    display:flex;gap:2px;
    background:var(--ink-bg-alt);
    border-radius:10px;padding:3px;
    flex-shrink:0;
  }
  .schedule-view-switch-btn{
    background:none;border:none;
    color:var(--muted);
    font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
    padding:6px 8px;border-radius:7px;
    cursor:pointer;
    white-space:nowrap;
  }
  .schedule-view-switch-btn.active{
    background:var(--card);color:var(--paper);
    box-shadow:var(--shadow);
  }
  .schedule-week-list{display:flex;flex-direction:column;gap:2px;}
  .schedule-week-day{
    display:flex;gap:12px;
    padding:10px 4px;
    border-top:1px solid var(--border);
    cursor:pointer;
  }
  .schedule-week-day:first-child{border-top:none;}
  .schedule-week-day.today .schedule-week-day-num{
    background:var(--accent);color:var(--on-accent);
  }
  .schedule-week-day-head{
    flex-shrink:0;width:38px;text-align:center;
  }
  .schedule-week-day-name{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;}
  .schedule-week-day-num{
    display:inline-flex;align-items:center;justify-content:center;
    width:26px;height:26px;border-radius:50%;
    font-size:14px;font-weight:700;color:var(--paper);
    margin-top:2px;
  }
  .schedule-week-day-blocks{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px;padding-top:2px;}
  .schedule-week-person-row{display:flex;flex-wrap:wrap;gap:8px;}
  .schedule-week-block{
    display:flex;gap:6px;align-items:baseline;
    border-left:3px solid;border-right:3px solid;
    padding:2px 8px;
    font-size:12.5px;
    background:var(--ink-bg-alt);
    border-radius:6px;
  }
  .schedule-week-block-time{font-family:'IBM Plex Mono',monospace;font-size:10.5px;color:var(--muted);flex-shrink:0;}
  .schedule-week-block-title{color:var(--paper);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:120px;}
  .schedule-week-empty{font-size:12px;color:var(--muted);padding-top:2px;}

  .schedule-friend-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px;}
  .schedule-chip{
    background:var(--card); border:1px solid var(--border-strong);
    border-radius:999px; padding:8px 14px; font-size:12.5px; color:var(--paper);
    font-family:'Inter',sans-serif; cursor:pointer;
  }
  .schedule-chip.me{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);font-weight:700;cursor:default;}

  .presets{display:flex;flex-wrap:wrap;gap:8px;}
  .preset-chip{
    background:var(--ink-bg-alt); border:1px solid var(--border-strong);
    border-radius:999px; padding:8px 13px; font-size:12.5px; color:var(--paper);
    cursor:pointer;
  }
  .preset-chip-custom{display:inline-flex;align-items:center;gap:6px;padding-right:6px;}
  .preset-chip-remove{
    background:var(--border-strong); border:none; border-radius:50%;
    width:16px;height:16px; color:var(--paper); font-size:10px; line-height:1;
    cursor:pointer; flex-shrink:0;
  }
  .preset-chip-add{background:transparent;border:1px dashed var(--border-strong);color:var(--muted);}
  .list-footer-actions{display:flex;align-items:center;gap:18px;margin-top:8px;flex-wrap:wrap;}
  .list-footer-link{margin-bottom:0;}
  .list-footer-actions select.list-footer-select{
    -webkit-appearance:none;-moz-appearance:none;appearance:none;
    width:auto;background:none;border:none;color:var(--accent);
    font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;
    padding:4px 0;
  }
  .preset-add-inline{display:inline-flex;gap:6px;align-items:center;}
  .preset-add-inline input{
    background:var(--ink-bg-alt); border:1px solid var(--border-strong); border-radius:999px;
    padding:8px 13px; font-size:12.5px; color:var(--paper); width:150px;
  }

  .tl-outer{display:flex;}
  .tl-hour-gutter{flex-shrink:0;width:40px;margin-top:42px;box-sizing:border-box;}
  .tl-hour-gutter .tl-hour-row{height:56px;position:relative;border-top:none;}
  .tl-hour-gutter .tl-hour-row:last-child{border-bottom:none;}
  .tl-scroll-area{flex:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .tl-lane-heads{display:flex;gap:6px;margin-bottom:8px;padding-right:4px;box-sizing:border-box;}
  .tl-lane-head{box-sizing:border-box;text-align:center;font-size:11.5px;font-weight:700;padding:7px 4px;border-radius:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .tl-timeline{position:relative;margin-bottom:10px;padding-right:4px;box-sizing:border-box;}
  .tl-hour-row{height:56px;border-top:1px solid var(--border);position:relative;}
  .tl-hour-row:last-child{border-bottom:1px solid var(--border);}
  .tl-hour-label{position:absolute;left:0;top:-7px;width:32px;text-align:right;font-family:'IBM Plex Mono',monospace;font-size:10px;color:var(--muted);}
  .tl-next-day-tag{
    display:inline-block;
    background:rgba(0,0,0,0.2);
    padding:1px 4px;
    border-radius:4px;
    font-size:8.5px;
    font-weight:700;
  }
  .tl-lanes{position:absolute;top:0;left:0;right:4px;bottom:0;display:flex;gap:6px;box-sizing:border-box;}
  .tl-lane{box-sizing:border-box;position:relative;}
  .tl-block{
    position:absolute;left:0;right:0;border-radius:9px;padding:6px 8px;
    overflow:hidden;color:#12181f;cursor:pointer;
  }
  .tl-block-title{font-size:11px;font-weight:700;line-height:1.25;}
  .tl-block-time{font-size:9.5px;opacity:0.8;font-family:'IBM Plex Mono',monospace;margin-top:1px;}

  .share-filter-tabs{
    display:flex;gap:6px;
    margin-bottom:16px;
  }
  .share-filter-tab{
    flex:1;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:12.5px;font-weight:600;
    padding:9px;border-radius:10px;
    cursor:pointer;
  }
  .share-filter-tab.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

  .home-filter-row{display:flex;gap:8px;margin-bottom:14px;}
  .home-filter-select{
    flex:1;min-width:0;
    background:var(--card);
    border:1px solid var(--border-strong);
    border-radius:10px;
    padding:7px 10px;
    color:var(--paper);
    font-family:'Inter',sans-serif;
    font-size:12.5px;font-weight:600;
  }

  .settings-tab{
    /* Bredd efter innehåll men får krympa — "Notifications" är mycket
       längre än "Konto", och med lika breda flikar (flex:1) stack raden ut
       över kanten på engelska. Krymper texten ändå inte får plats kapas
       den med "…" istället för att sticka ut. */
    flex:1 1 auto;min-width:0;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
    background:var(--card);
    border:1px solid var(--border);
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:clamp(11px, 3.2vw, 12.5px);font-weight:600;
    padding:9px 7px;border-radius:10px;
    cursor:pointer;
  }
  .settings-tab.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

  .share-chip-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
  .share-toggle-chip{
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:999px;
    padding:8px 14px;
    font-family:'Inter',sans-serif;
    font-size:12.5px;color:var(--paper);
    cursor:pointer;
  }
  .share-toggle-chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;}

  .category-chip-list{display:flex;flex-wrap:wrap;gap:8px;}
  .category-chip{
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:999px;
    padding:8px 14px;
    font-family:'Inter',sans-serif;
    font-size:12.5px;color:var(--paper);
    cursor:pointer;
  }
  .category-chip.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:600;}
  .category-chip-new{border-style:dashed;color:var(--muted);}

  .status-banner{
    padding:10px 16px;font-size:13px;text-align:center;
    display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  }
  .status-banner-alert{background:var(--red-soft, rgba(217,97,79,0.18));color:var(--red, #D9614F);}
  .status-banner-version{background:var(--accent-soft);color:var(--accent);}
  .status-banner-update-link{
    color:inherit;font-weight:700;text-decoration:underline;
    text-underline-offset:2px;
  }

  .empty-state{
    text-align:center;
    padding:34px 18px;
    color:var(--muted);
    background:var(--card);
    border:1px dashed var(--border-strong);
    border-radius:14px;
    font-size:14px;
    line-height:1.6;
  }
  .empty-state .big{font-family:'Fraunces',serif;font-size:18px;color:var(--paper);display:block;margin-bottom:6px;}
  .unseen-shared-row{display:flex;align-items:center;gap:8px;padding:7px 0;cursor:pointer;}
  .unseen-shared-dot{width:7px;height:7px;border-radius:50%;background:var(--accent);flex-shrink:0;}
  /* Titel + tagg grupperade ihop i en EGEN flex-rad som sträcker ut sig
     (istället för att bara titeln gjorde det tidigare) — annars fick en
     kort titel taggen och avsändarnamnet att hamna långt åt höger, tätt
     ihop mot varandra med ett tomt mellanrum mot titeln. Nu håller taggen
     ihop med titeln oavsett hur kort eller lång den är. */
  .unseen-shared-title-group{display:flex;align-items:center;gap:8px;flex:1;min-width:0;}
  .unseen-shared-name{font-size:13px;color:var(--paper);font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .unseen-shared-tag{font-size:10.5px;color:var(--accent);background:rgba(var(--accent-rgb),0.15);border-radius:999px;padding:2px 8px;flex-shrink:0;}
  .unseen-shared-from{font-size:11.5px;color:var(--muted);flex-shrink:0;}

  /* ---- Hemvyns rutnät ---- */
  #homeGridWrap{ --hg-row:76px; margin-bottom:84px; }
  /* Hemskärmens egna delar ritas som de alltid sett ut — utan rutans ram */
  .hg-tile.hg-plain{ background:none; border:none; padding:0; overflow:visible; }
  .hg-tile.hg-plain .hg-content{ gap:0; }
  .hg-plain .today-row{ margin:0; height:100%; }
  .hg-plain .today-card{ box-sizing:border-box; }
  /* Dagskortet fyller exakt sin ruta (position absolute) — innehållet kan
     då aldrig tvinga raderna att växa. Tre varianter efter rutans höjd. */
  .hg-tile.hg-today .hg-content{ position:absolute; inset:0; }
  .hg-today .today-row{ height:100%; }
  .hg-today .today-card{ height:100%; display:flex; flex-direction:column; justify-content:center; padding:20px 20px; }
  .hg-today .today-sub{ margin-top:10px; }
  /* Mellan (2 rader) */
  /* En rad (3×1, 4×1): egen kompakt markup (.today-card-compact) */
  .today-card.today-card-compact{
    flex-direction:row; align-items:center; justify-content:flex-start; gap:12px;
    padding:8px 14px; border-radius:14px;
  }
  .today-card-compact::after{ display:none; }
  .tc-num{ font-size:36px; font-weight:600; line-height:1; color:var(--paper); flex-shrink:0; }
  .tc-mid{ min-width:0; flex:1; }
  .tc-wd{ font-size:12px; color:var(--paper); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tc-mo{ font-size:11.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .tc-sub{ flex-shrink:0; font-size:12px; color:var(--muted); display:flex; align-items:center; gap:5px; white-space:nowrap; }
  .tc-sub b{ color:var(--paper); }
  .hg-today-narrow .today-month{ display:none; }
  .hg-today-narrow .today-sub{ font-size:11.5px; }
  /* Förhandsbilder i "Lägg till på Hem" */
  .hg-plain .home-big-btn{ margin:0; height:100%; min-height:52px; }
  .home-grid.editing .hg-tile.hg-plain{ outline:1.5px dashed var(--border-strong); outline-offset:-1px; border-radius:18px; }
  .home-grid.editing .hg-tile.hg-plain.hg-selected{ outline-color:var(--accent); }
  /* I redigeringsläget går innehållet inte att trycka på (dagskortet,
     knappar) — trycket går till rutan (markera/flytta) istället */
  .home-grid.editing .hg-content{ pointer-events:none; }
  /* Bortglömt: alltid på plats, röd med antal eller lugn grön */
  .hg-forgotten{ justify-content:center; }
  .hg-forgotten .hg-content{ justify-content:center; }
  .hg-forgotten-some{ background:rgba(224,133,133,0.10); border-color:rgba(224,133,133,0.45); }
  .hg-forgotten-row{ display:flex; align-items:center; gap:10px; min-width:0; }
  .hg-forgotten-num{ font-family:'Fraunces',serif; font-size:30px; font-weight:700; color:var(--red); line-height:1; flex-shrink:0; }
  .hg-forgotten-label{ font-size:13.5px; color:var(--paper); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hg-forgotten-go{ font-size:12.5px; font-weight:700; color:var(--red); flex-shrink:0; }
  .hg-forgotten-ok{ font-size:13.5px; font-weight:600; color:var(--green); text-align:center; }
  /* 2 rutor bred: siffra + text på första raden (får radbrytas), länken under */
  .hg-forgotten-narrow .hg-forgotten-row{ flex-wrap:wrap; row-gap:4px; column-gap:8px; }
  .hg-forgotten-narrow .hg-forgotten-label{ white-space:normal; overflow:visible; line-height:1.2; font-size:13px; }
  .hg-forgotten-narrow .hg-forgotten-go{ flex-basis:100%; font-size:12px; }
  .hg-forgotten-narrow .hg-forgotten-num{ font-size:26px; }
  /* 1 ruta: allt under varandra, centrerat */
  .hg-forgotten-tiny .hg-forgotten-row{ flex-direction:column; gap:2px; text-align:center; }
  .hg-forgotten-tiny .hg-forgotten-label{ white-space:normal; font-size:11px; line-height:1.15; }
  .hg-forgotten-tiny .hg-forgotten-go{ font-size:11px; }
  .hg-forgotten-tiny .hg-forgotten-num{ font-size:22px; }
  .hg-toolbar-btns{ display:flex; gap:8px; flex-shrink:0; }
  .hg-reset-btn{ width:auto; padding:8px 12px; }
  .home-grid{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px; position:relative; }
  .hg-tile{
    position:relative; min-width:0; min-height:0; overflow:hidden; box-sizing:border-box;
    background:var(--card); border:1px solid var(--border); border-radius:14px;
    padding:10px 11px; cursor:pointer; display:flex; flex-direction:column;
    transition:transform .12s, box-shadow .12s, border-color .12s;
  }
  .hg-content{ min-width:0; display:flex; flex-direction:column; gap:2px; flex:1 1 auto; }
  .hg-title{ font-size:13px; font-weight:600; color:var(--paper); line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0; }
  .hg-icon{ margin-right:5px; }
  .hg-meta{ font-size:11.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .hg-sub{ font-size:10.5px; color:var(--muted); opacity:0.8; margin-top:auto; }
  .hg-bd-icon{ display:inline-flex; vertical-align:-3px; color:#E7A3B8; }
  .hg-bd-icon.round{ color:var(--accent); }
  .hg-bd-icon .bd-icon{ width:15px; height:15px; }
  .hg-bd-when{ margin-top:auto; font-size:12px; font-weight:700; color:var(--accent); }
  .hg-bd-when.today{ color:#E7A3B8; }
  .hg-bd-small{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; height:100%; }
  .hg-bd-small .hg-bd-icon .bd-icon{ width:20px; height:20px; }
  .hg-note{ font-size:12px; color:var(--muted); line-height:1.45; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; margin-top:2px; }
  .hg-line{ font-size:12px; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; line-height:1.55; }
  .hg-line.done{ color:var(--muted); text-decoration:line-through; }
  .hg-time{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--accent); }
  .hg-more{ font-size:11px; color:var(--muted); margin-top:auto; }
  .hg-missing{ opacity:0.55; border-style:dashed; }
  .hg-customize-link{ display:block; margin:10px auto 0; background:none; border:none; color:var(--muted); font-size:12.5px; font-weight:600; cursor:pointer; padding:6px 10px; }
  .hg-empty-intro{
    width:100%; display:flex; flex-direction:column; gap:4px; align-items:center; text-align:center;
    background:transparent; border:1.5px dashed var(--border-strong); border-radius:14px;
    padding:18px 16px; cursor:pointer; margin:-8px 0 24px; color:var(--paper);
  }
  .hg-empty-intro.hg-intro-below{ margin:10px 0 0; }
  .hg-empty-intro-title{ font-size:14px; font-weight:600; color:var(--accent); }
  .hg-empty-intro-text{ font-size:12.5px; color:var(--muted); line-height:1.45; }
  /* Redigeringsläge */
  .hg-toolbar{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
  .hg-toolbar-hint{ font-size:12px; color:var(--muted); line-height:1.4; }
  .hg-done-btn{ width:auto; padding:8px 18px; flex-shrink:0; }
  .hg-cell{
    border:1.5px dashed var(--border); border-radius:14px; display:flex; align-items:center; justify-content:center;
    color:var(--muted); opacity:0.55; font-size:18px; cursor:pointer; user-select:none;
  }
  .home-grid.editing .hg-tile{ touch-action:none; user-select:none; -webkit-user-select:none; border-color:var(--border-strong); }
  .hg-tile.hg-selected{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-soft); }
  .hg-tile.hg-dragging{ z-index:5; box-shadow:0 10px 28px rgba(0,0,0,0.35); border-color:var(--accent); transition:none; opacity:0.95; }
  .hg-tile.hg-dragging.hg-drop-bad{ border-color:var(--red); }
  .hg-remove, .hg-resize{
    position:absolute; z-index:2; border:none; cursor:pointer; font-weight:700; line-height:1;
    background:var(--card-raised); color:var(--paper); box-shadow:0 1px 4px rgba(0,0,0,0.3);
  }
  .hg-remove{ top:5px; right:5px; width:22px; height:22px; border-radius:50%; font-size:11px; }
  .hg-resize{ bottom:5px; right:5px; padding:3px 7px; border-radius:8px; font-size:10.5px; font-family:'IBM Plex Mono',monospace; color:var(--accent); }
  .hg-editing .hg-content{ padding-right:18px; }
  .hg-size-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .hg-size-opt{
    display:flex; flex-direction:column; align-items:center; gap:8px; padding:12px 8px;
    background:var(--ink-bg-alt); border:1px solid var(--border-strong); border-radius:12px;
    color:var(--paper); cursor:pointer; font-family:'Inter',sans-serif;
  }
  .hg-size-opt.current{ border-color:var(--accent); background:var(--accent-soft); }
  .hg-size-opt:disabled{ opacity:0.4; cursor:default; }
  .hg-size-mini{ display:grid; grid-auto-flow:row; grid-auto-rows:14px; gap:3px; grid-template-columns:repeat(var(--hg-mini-cols, 4), 14px); }
  .hg-mode-label{ color:var(--accent); font-weight:700; }
  .hg-size-mini span{ border-radius:3px; background:var(--border); }
  .hg-size-mini span.on{ background:var(--accent); }
  .hg-size-label{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--paper); }
  .hg-size-opt.current .hg-size-label{ color:var(--accent); font-weight:600; }
  .home-big-btn{
    width:100%;
    padding:18px;
    font-size:15.5px;
    font-weight:600;
    margin-bottom:26px;
  }

  .show-more-btn{
    display:block;
    width:100%;
    background:var(--card);
    border:1px dashed var(--border-strong);
    color:var(--accent);
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:13.5px;
    padding:13px;
    border-radius:12px;
    cursor:pointer;
    margin-top:4px;
  }
  .show-more-btn:hover{border-color:var(--accent);}

  /* ---- Nav ---- */
  nav.tabs{
    position:fixed;
    bottom:0; left:0; right:0;
    background:linear-gradient(to top, var(--ink-bg) 70%, transparent);
    padding:14px 0 18px 0;
    /* Högre än .overlay (40) — flikarna ska ALDRIG kunna blockeras av ett
       kvarglömt eller osynligt helskärmselement (t.ex. från en
       tredjepartswidget), vilket annars gav symptomet "knapparna kopplas
       korrekt men klicken når aldrig fram". Riktiga modaler ritar ändå ut
       sin egen bakgrund som täcker skärmen visuellt. */
    z-index:60;
  }
  .tabs-row{
    max-width:520px;
    margin:0 auto;
    padding:0 20px;
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .tabs-inner{
    display:flex;
    gap:4px;
    background:var(--card-raised);
    border:1px solid var(--border-strong);
    border-radius:999px;
    padding:5px;
    box-shadow:var(--shadow);
  }
  .tab-btn{
    border:none;background:transparent;
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:13.5px;font-weight:600;
    padding:9px 20px;
    border-radius:999px;
    cursor:pointer;
  }
  .tab-btn-icon-only{ display:none; }
  .tab-btn-icon-only svg{ width:18px; height:18px; }
  .tab-btn.active{background:var(--accent);color:var(--on-accent);}
  /* Smalare knappar på mobil — långa texter ("Födelsedagar") får plats utan
     att menyn blir bredare än skärmen */
  @media (max-width:560px){
    .tabs-inner{ max-width:calc(100vw - 24px); box-sizing:border-box; gap:2px; padding:4px; }
    .tab-btn{ padding:8px clamp(8px, 3.2vw, 16px); font-size:clamp(12px, 3.5vw, 13.5px); white-space:nowrap; }
  }
  .tabs-divider{
    width:1px;
    align-self:stretch;
    background:var(--border-strong);
    margin:4px 2px;
  }
  .tab-btn-icon{
    padding:9px 14px;
    display:flex;align-items:center;justify-content:center;
    color:var(--muted);
  }
  .tab-btn-icon:hover{color:var(--accent);}
  .tab-btn-icon svg{width:17px;height:17px;}

  /* ---- FAB ---- */
  .fab{
    position:fixed;
    bottom:88px; right:calc(50% - 260px + 20px);
    width:52px;height:52px;border-radius:50%;
    background:linear-gradient(145deg, #e8b866, var(--accent) 60%);
    color:var(--on-accent);
    border:1px solid rgba(255,235,200,0.5);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 8px 20px rgba(var(--accent-rgb),0.4), inset 0 1px 0 rgba(255,255,255,0.3);
    cursor:pointer;
    /* Följer med upp när flikarna höjdes till 60 — ska fortfarande ligga
       precis ovanför dem, som tidigare (var 21 mot flikarnas 20). */
    z-index:61;
    transition:transform 0.2s ease;
  }
  .fab svg{width:22px;height:22px;transition:transform 0.25s ease;}
  .fab.fab-open svg{transform:rotate(45deg);}
  @media (max-width:560px){
    .fab{right:20px;}
  }

  /* ---- Mini-FAB:ar — svischar ut i en båge ovanför huvudknappen när den
     trycks, istället för en full modalruta. Startar hopfällda exakt ovanpå
     huvudknappen (skala 0, osynliga), fjädrar ut till sin egen plats när
     .fab-mini-open läggs till på wrappern. ---- */
  .fab-mini{
    position:fixed;
    bottom:88px; right:calc(50% - 260px + 20px);
    width:52px;height:52px;border-radius:50%;
    background:var(--card);
    color:var(--paper);
    border:1px solid var(--border-strong);
    display:flex;align-items:center;justify-content:center;
    box-shadow:0 6px 16px rgba(0,0,0,0.35);
    cursor:pointer;
    z-index:60;
    opacity:0;
    transform:scale(0.3) translate(0,0);
    pointer-events:none;
    transition:transform 0.25s cubic-bezier(0.34,1.56,0.64,1), opacity 0.2s ease;
  }
  .fab-mini svg{width:21px;height:21px;}
  .fab-mini-open{
    opacity:1;
    pointer-events:auto;
  }
  /* Röst-knappen svischar rakt upp, menyknappen upp-och-åt-vänster — ger
     just den där båg-känslan istället för att båda bara staplas rakt ovanpå
     varandra i en helt rak linje. Avstånden är medvetet beräknade (68px
     mellan knapparna, ~78px från huvudknappen) för att aldrig kunna
     krocka, med bred marginal — se kommentar vid .fab-mini ovan. */
  /* Röst och meny i samma höjd, sida vid sida, i en ruta ovanför plus-knappen */
  .fab-mini-open.fab-mini-voice{ transform:translate(0, -78px); }
  .fab-mini-open.fab-mini-menu{ transform:translate(-62px, -78px); }
  .fab-mini-open.fab-mini-menu.solo{ transform:translate(0, -78px); }
  .fab-mini-extra{ opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.25s cubic-bezier(0.34,1.56,0.64,1); }
  .fab-mini-extra.fab-mini-open{ opacity:1; pointer-events:auto; }
  .fab-mini-panel{
    position:fixed; z-index:59;
    bottom:158px; right:calc(50% - 260px + 12px);
    width:130px; height:68px; border-radius:22px;
    background:var(--card-raised); border:1px solid var(--border-strong);
    box-shadow:0 8px 22px rgba(0,0,0,0.35);
    transform:translateY(10px) scale(0.96);
  }
  .fab-mini-panel.solo{ width:68px; }
  /* Extra knappar: panelen växer åt vänster, 62 px per knapp */
  .fab-mini-panel.fab-panel-n1{ width:192px; }
  .fab-mini-panel.fab-panel-n2{ width:254px; }
  .fab-mini-panel.solo.fab-panel-n1{ width:130px; }
  .fab-mini-panel.solo.fab-panel-n2{ width:192px; }
  .fab-mini-open.fab-mini-extra-btn[data-fab-slot="1"]{ transform:translate(-62px, -78px); }
  .fab-mini-open.fab-mini-extra-btn[data-fab-slot="2"]{ transform:translate(-124px, -78px); }
  .fab-mini-open.fab-mini-extra-btn[data-fab-slot="3"]{ transform:translate(-186px, -78px); }
  .fab-mini-extra-btn .bd-icon{ width:20px; height:20px; }
  .fab-mini-panel.fab-mini-open{ transform:none; }
  /* Skrivfältet till vänster om plus-knappen */
  .fab-quick{
    position:fixed; z-index:60;
    bottom:88px; right:calc(50% - 260px + 20px + 62px);
    width:calc(min(100vw, 520px) - 40px - 62px);
    height:52px; display:flex; align-items:center; gap:6px;
    padding:0 6px 0 14px; margin:0; box-sizing:border-box;
    background:var(--card-raised); border:1px solid var(--border-strong); border-radius:26px;
    box-shadow:0 8px 22px rgba(0,0,0,0.35);
    transform:translateX(14px);
  }
  .fab-quick.fab-mini-open{ transform:none; }
  .fab-quick-input{
    flex:1; min-width:0; height:40px; border:none !important; background:transparent !important;
    color:var(--paper); font-family:'Inter',sans-serif; font-size:14.5px; padding:0 !important; outline:none; box-shadow:none !important;
  }
  .fab-quick-input::placeholder{ color:var(--muted); opacity:0.85; }
  .fab-quick-send{
    flex-shrink:0; width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
    background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center;
  }
  .fab-quick-send svg{ width:19px; height:19px; }
  .quick-add-hint{
    margin:-4px 0 14px; padding:9px 12px; border-radius:10px; font-size:13px; line-height:1.4;
    background:var(--accent-soft); color:var(--paper); border:1px solid rgba(var(--accent-rgb),0.35);
  }
  @media (max-width:560px){
    .fab-mini{right:20px;}
    .fab-mini-panel{right:12px;}
    .fab-quick{right:82px; width:calc(100vw - 102px);}
  }
  .fab-mini-backdrop{
    position:fixed; inset:0; z-index:59;
    background:transparent;
  }

  /* ---- Guide-ledtrådar för en helt ny användare (inget skapat än) ----
     Pratbubbla-stil, med en liten triangel som pekar mot respektive
     knapp. Grön (inte guld) med flit — annars smälter den ihop med
     plus-knappen, "Visa påminnelser" och IDAG-bandet, som alla redan är
     guldfärgade. Positioneras helt i JS (se positionOnboardingHint) via
     knapparnas FAKTISKA, uppmätta plats — CSS-positionering visade sig
     inte gå att lita på här, eftersom plus-knappen har tre helt olika
     positioneringsregler (desktop/mobil stående/mobil liggande), och
     ledtrådarna behöver alltid hamna rätt oavsett vilken som råkar
     gälla just då. */
  .onboarding-hint{
    position:fixed;
    z-index:62;
    background:var(--green);
    color:#fff;
    font-size:13.5px;
    font-weight:600;
    line-height:1.35;
    padding:9px 13px;
    border-radius:12px;
    box-shadow:0 6px 16px rgba(0,0,0,0.35);
    max-width:190px;
    pointer-events:none;
    animation:onboardingHintIn 0.3s ease;
  }
  .onboarding-hint::after{
    content:'';
    position:absolute;
    top:100%;
    left:var(--arrow-left, 16px);
    border:7px solid transparent;
    border-top-color:var(--green);
  }
  @keyframes onboardingHintIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
  }

  /* ---- Month view ---- */
  .month-header{
    display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
    gap:10px;margin-bottom:16px;
  }
  /* Titel + bakåt/idag/framåt måste ALLTID ligga på samma rad — även om
     titeln (t.ex. "Tisdag 15 september") blir lång nog att annars fått
     .month-header att wrappa nav-gruppen ner till en egen rad. En egen,
     icke-brytande underrad garanterar det: titeln krymper med "..." om
     det verkligen inte finns plats, istället för att nav-knapparna
     hoppar ner under. Vy-växlaren (Dag/Vecka/Månad) ligger UTANFÖR den
     här och kan fortfarande wrappa ner för sig, som förut. */
  .month-header-row1{
    display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
    gap:10px; flex:1 1 auto; min-width:0; order:1;
  }
  .month-header-row1 h2{ order:0; flex:1 1 auto; }
  .month-header-row1 .month-nav-group{ order:1; flex:0 0 auto; }
  .month-header h2{ order:1; }
  .month-header .month-nav-group{ order:2; }
  .month-header .schedule-view-switcher{
    order:3; flex-basis:100%; margin-top:12px;
  }
  .month-header h2{
    font-size:17px;text-transform:capitalize;
    min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .clickable-title{cursor:pointer;border-bottom:1px dashed var(--border-strong);padding-bottom:2px;}
  .clickable-title:hover{color:var(--accent);}
  .month-nav-btn{
    background:var(--card);
    border:1px solid var(--border-strong);
    color:var(--paper);
    width:30px;height:30px;border-radius:8px;
    cursor:pointer;
    font-size:15px;
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
  }
  .month-nav-group{display:flex;gap:6px;align-items:center;flex-shrink:0;}
  .today-jump{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px;
    color:var(--accent);
    background:var(--accent-soft);
    border:1px solid transparent;
    border-radius:8px;
    padding:7px 8px;
    cursor:pointer;
    white-space:nowrap;
  }
  .weekday-row{
    display:grid;grid-template-columns:repeat(7,1fr);
    margin-bottom:6px;
  }
  .weekday-row div{
    text-align:center;font-size:11px;color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
    letter-spacing:0.05em;
  }
  .month-grid{
    display:grid;grid-template-columns:repeat(7,1fr);
    gap:6px;
  }
  .month-grid.with-weeknum{grid-template-columns:26px repeat(7,1fr);}
  .weekday-row.with-weeknum{grid-template-columns:26px repeat(7,1fr);}
  .wk-label{text-align:center;font-size:10px;color:var(--muted);font-family:'IBM Plex Mono',monospace;}
  .week-num-cell{
    display:flex;align-items:center;justify-content:center;
    font-size:10px;
    color:var(--muted);
    font-family:'IBM Plex Mono',monospace;
  }
  .day-cell{
    aspect-ratio:1/1;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:10px;
    cursor:pointer;
    position:relative;
    overflow:hidden;
  }
  .schedule-day-dots{
    position:absolute;
    bottom:8px; left:0; right:0;
    display:flex; gap:3px; justify-content:center;
  }
  .schedule-day-dot{
    width:5px;height:5px;border-radius:50%;flex-shrink:0;
  }
  .schedule-month-legend{
    display:flex;flex-wrap:wrap;gap:10px 16px;
    margin-top:14px;padding-top:12px;
    border-top:1px solid var(--border);
  }
  .schedule-month-legend-item{
    display:flex;align-items:center;gap:6px;
    font-size:12px;color:var(--muted);
  }
  .schedule-month-legend-item .schedule-day-dot{width:8px;height:8px;}
  .day-count-badge{
    position:absolute;
    bottom:2px; right:3px;
    background:var(--card-raised);
    color:var(--paper);
    font-family:'IBM Plex Mono',monospace;
    font-size:8.5px;
    font-weight:500;
    letter-spacing:0.01em;
    padding:1.5px 3.5px;
    border-radius:5px;
    line-height:1;
    border:1px solid var(--border-strong);
  }
  .legend-badge{
    display:inline-block;
    background:var(--card);
    color:var(--paper);
    font-family:'IBM Plex Mono',monospace;
    font-size:9px;
    font-weight:500;
    padding:2px 5px;
    border-radius:5px;
    border:1px solid var(--border-strong);
  }
  .day-cell.outside{opacity:0.32;}
  .day-cell.today{border-color:var(--paper);box-shadow:0 0 0 2px var(--paper) inset;}
  /* Samma guldfärg som .today-pill (dagsvyns "Idag"-märke i rubriken), men
     som ett diagonalt band över övre högra hörnet istället för en rak
     linje — matchar den diagonala idag-markeringen som redan finns på
     hem-skärmen, återanvänd här i månadsvyns kalender-celler.
     .day-cell fick overflow:hidden ovan specifikt för att klippa bandets
     hörn snyggt mot cellens egen rundade form. */
  .today-dash{
    position:absolute;
    top:8px;right:-11px;
    width:38px;height:7px;
    background:var(--accent);
    transform:rotate(45deg);
  }
  .day-cell .num{
    position:absolute;
    top:6px; left:7px;
    font-size:13px;color:var(--paper);font-weight:500;font-family:'Inter',sans-serif;
  }
  .day-cell.status-green{background:var(--green);border-color:var(--green);}
  /* "Grön bock"-läget: liten bock när allt den dagen är klart — på SAMMA
     plats som "2/3"-märket (nere till höger), som den ersätter. I liggande
     läge flyttas båda till höger mitt på (se landskapsreglerna). */
  .day-done-check{
    position:absolute;bottom:3px;right:3px;width:16px;height:16px;border-radius:50%;
    background:var(--green);color:#fff;display:flex;align-items:center;justify-content:center;
    box-shadow:0 1px 3px rgba(0,0,0,0.25);pointer-events:none;
  }
  .day-done-check svg{width:10px;height:10px;}
  .legend-check{position:static;display:inline-flex;width:12px;height:12px;box-shadow:none;}
  .legend-check svg{width:8px;height:8px;}
  .day-cell.status-yellow{background:var(--calendar-yellow);border-color:var(--calendar-yellow);}
  .day-cell.status-red{background:var(--red);border-color:var(--red);}
  .day-cell.status-green .num,
  .day-cell.status-yellow .num,
  .day-cell.status-red .num{color:#1B2430;font-weight:700;}
  .day-cell.status-green.today,
  .day-cell.status-yellow.today,
  .day-cell.status-red.today{box-shadow:0 0 0 3px #1B2430 inset;}
  .legend{
    display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
    margin-top:20px;
    font-size:11.5px;color:var(--muted);
  }
  .legend span{display:inline-flex;align-items:center;gap:6px;}
  .legend i{width:8px;height:8px;border-radius:50%;display:inline-block;}

  /* ---- Day view ---- */
  .back-row{display:flex;align-items:center;gap:10px;margin-bottom:6px;cursor:pointer;color:var(--muted);font-size:13px;}
  .back-row:hover{color:var(--paper);}
  .day-view-header{margin:10px 0 20px 0;}
  /* Centrerad sidrubrik med en gul, tydlig tillbaka-knapp flytande till
     vänster om den — samma utseende som den gula tillbaka-knappen i
     landskapsläge (se motsvarande regel i landskaps-blocket längst ner),
     men här avsedd för VANLIGT (stående) läge på specifika sidor som
     uttryckligen använder klassen, t.ex. Vänner-sidan. Påverkar INTE andra
     sidors .back-row/.day-view-header, som ser ut precis som förut. */
  .centered-page-header{ position:relative; text-align:center; margin:10px 0 20px 0; }
  .day-view-header-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;}
  .day-view-header-center{text-align:center;flex:1;position:relative;}
  /* Dagsvyns rubrik: dag+månad alltid på sin egen rad, året alltid på
     nästa — oavsett om texten (t.ex. "30 September") råkar vara kort
     nog att annars fått plats ihop med året på en enda rad, vilket
     annars gav en inkonsekvent en-rad/två-rader-känsla beroende på hur
     långt just det datumet var. Landskapsläge har gott om bredd och ska
     istället alltid hålla ihop det på en enda rad. */
  .day-header-datemonth, .day-header-year{ display:block; }
  @media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
    .day-header-datemonth, .day-header-year{ display:inline; }
    .day-header-year::before{ content:' '; }
  }
  .today-pill{
    position:absolute;
    top:-2px;left:50%;
    transform:translateX(-50%);
    background:var(--accent);color:var(--on-accent);
    font-size:9.5px;font-weight:700;
    padding:2px 8px;border-radius:999px;
    white-space:nowrap;
  }
  .day-view-header-center .wk{margin-top:14px;}
  .back-row-day-view{
    position:absolute; left:0; top:8px; z-index:2;
    display:inline-flex; align-items:center; justify-content:center;
    padding:6px 14px;
    border-radius:999px;
    background:var(--accent); color:var(--on-accent);
    font-size:12px; font-weight:600;
    white-space:nowrap;
    margin-bottom:0;
    cursor:pointer;
  }
  .day-nav-arrow{
    flex-shrink:0;width:36px;height:36px;border-radius:50%;
    background:var(--card);border:1px solid var(--border-strong);
    color:var(--paper);font-size:18px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
  }
  .day-view-header .wk{color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:12px;letter-spacing:0.08em;text-transform:uppercase;}
  .day-view-header h2{font-size:30px;margin-top:4px;}

  .allday-note{
    background:var(--accent-soft);
    border:1px solid rgba(var(--accent-rgb),0.3);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:8px;
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    cursor:pointer;
  }
  .allday-note > div:first-child{min-width:0;overflow:hidden;}
  .allday-note .t{font-size:14px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .allday-note.done .t{text-decoration:line-through;color:var(--muted);}
  .allday-note.future-preview{opacity:0.6;}
  .chore-future-tag{
    flex-shrink:0;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;letter-spacing:0.04em;text-transform:uppercase;
    color:var(--muted);
    background:rgba(0,0,0,0.15);
    padding:6px 10px;border-radius:8px;
    border:none;cursor:pointer;
  }
  .chore-missed-tag{
    font-size:11px;color:var(--red);
    margin-top:3px;
  }
  .countdown-live{
    font-family:'IBM Plex Mono',monospace;
    font-size:12.5px;color:var(--accent);
    margin-top:2px;
    line-height:1.4;
    min-height:2.8em;
  }
  .allday-tag{
    font-family:'IBM Plex Mono',monospace;font-size:10px;
    color:var(--accent);letter-spacing:0.08em;text-transform:uppercase;
  }

  /* ---- Modal ---- */
  .overlay{
    position:fixed;inset:0;
    background:rgba(10,14,20,0.6);
    display:flex;align-items:flex-end;justify-content:center;
    z-index:40;
    backdrop-filter:blur(2px);
  }
  /* Aviserings-samtycket är en kort "bottom sheet" som själv ligger nära
     botten av skärmen — utan den här höjningen hamnar den bakom
     bottenmenyn (z-index:60) och de svävande knapparna (61-62), som
     medvetet ligger högre än .overlay:s vanliga 40 (se kommentar vid
     bottenmenyns egen z-index-regel). Övriga modaler är oftast höga nog
     att inte märka av samma krock, så den delade .overlay-klassen lämnas
     orörd — det här är en riktad höjning bara för den här rutan. */
  #analyticsConsentOverlay{ z-index:65; }

  .modal{
    width:100%;max-width:520px;
    background:var(--card-raised);
    border-radius:20px 20px 0 0;
    border:1px solid var(--border-strong);
    padding:22px 16px 26px 16px;
    animation:slideUp .22s ease;
    max-height:88vh;overflow-y:auto;
  }
  @keyframes slideUp{from{transform:translateY(24px);opacity:0;}to{transform:translateY(0);opacity:1;}}
  .modal-framed{
    border:1px solid rgba(var(--accent-rgb),0.35);
    box-shadow:0 -8px 32px rgba(0,0,0,0.35), 0 0 0 1px rgba(var(--accent-rgb),0.08) inset;
    position:relative;
  }
  .modal-framed::before{
    content:'';
    position:absolute;top:0;left:20px;right:20px;height:3px;
    background:linear-gradient(90deg, transparent, var(--accent), transparent);
    border-radius:0 0 3px 3px;
  }
  .modal h3{font-size:19px;margin-bottom:16px;}
  .create-menu-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
  .create-menu-head h3{margin:0;}
  .create-menu-item{width:100%;text-align:left;margin-bottom:10px;padding:14px 16px;font-size:15px;display:flex;align-items:center;justify-content:space-between;gap:12px;}
  .secondary-reminder-grid{
    display:grid; grid-template-columns:1fr 1fr; gap:8px;
    margin-top:10px;
  }
  .secondary-reminder-opt{
    position:relative;
    background:var(--card); border:1px solid var(--border-strong);
    border-radius:12px; padding:12px 10px;
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600;
    color:var(--paper);
    text-align:left;
    cursor:pointer;
  }
  .secondary-reminder-opt.active{ border-color:var(--accent); background:var(--card-raised); }
  .secondary-reminder-opt-check{
    position:absolute; top:8px; right:8px;
    width:15px; height:15px; color:var(--accent);
  }
  .voice-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px;}
  .create-menu-item-big{padding:14px 16px;align-items:flex-start;}
  .create-menu-item-big .create-menu-item-swatch{margin-top:4px;flex-shrink:0;}
  .create-menu-item-text{display:flex;flex-direction:column;gap:3px;text-align:left;flex:1;min-width:0;}
  .create-menu-item-label{font-size:15px;font-weight:600;color:var(--paper);}
  .create-menu-item-desc{font-size:12px;color:var(--muted);line-height:1.4;white-space:normal;}
  .create-menu-item-swatch{
    flex-shrink:0;
    width:14px;height:14px;
    border-radius:4px;
  }
  .create-menu-item-swatch.swatch-reminder{background:var(--accent);}
  .create-menu-item-swatch.swatch-note{background:#D8C89F;}
  .create-menu-item-swatch.swatch-countdown{background:#9FC9D8;}
  .create-menu-item-swatch.swatch-birthday{background:#E7A3B8;}
  /* Födelsedagsikoner (tårta / jämnt år) */
  .bd-icon{ width:18px; height:18px; display:block; }
  .bd-title{ display:flex; align-items:center; gap:8px; }
  .bd-title .bd-icon{ width:22px; height:22px; color:#E7A3B8; }
  .bd-row-icon{ color:#E7A3B8 !important; opacity:1 !important; }
  .bd-row-icon.round, .bd-cake.round{ color:var(--accent) !important; }
  .check.bd-row-icon svg{ width:19px !important; height:19px !important; }
  /* Födelsedagsmodulen */
  .notif-modal-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .notif-modal-head h3{ margin-bottom:0; }
  .notif-clear-btn{
    flex-shrink:0; background:none; border:1px solid var(--border-strong); border-radius:999px;
    color:var(--accent); font-family:'Inter',sans-serif; font-size:13px; font-weight:700;
    padding:6px 14px; cursor:pointer;
  }
  .notif-clear-btn:disabled{ opacity:0.5; }
  #notificationsBox .notif-modal-head{ margin-bottom:14px; }
  .bd-import-link{ display:block; margin:0 auto 14px; text-align:center; font-size:13px; }
  .bd-import-bar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
  .bd-import-list{ max-height:46vh; }
  .bd-import-row .check{ flex-shrink:0; }
  .tab-btn-icon-only .bd-icon{ width:20px; height:20px; }
  /* "Fler listor" i skapa-menyn */
  .lists-page-header{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .lists-filter-btn{ position:relative; display:inline-flex; align-items:center; gap:6px; flex-shrink:0; cursor:pointer;
    padding:8px 14px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper);
    font-family:'Inter',sans-serif; font-size:13px; font-weight:600; max-width:60%; }
  .lists-filter-btn.active{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
  .lists-filter-text{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .lists-filter-icon svg{ width:15px; height:15px; display:block; }
  .lists-filter-btn select{ position:absolute; inset:0; opacity:0; width:100%; height:100%; cursor:pointer; }
  .hg-prio-dot{ display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:1px; }
  .hg-prio-dot.prio-high{ background:#E8876F; } .hg-prio-dot.prio-medium{ background:#E0B94D; } .hg-prio-dot.prio-low{ background:var(--muted); }
  .hg-line.hg-prio-focus{ font-weight:600; }
  .voice-listcat-icon{ display:inline-flex; width:15px; height:15px; }
  .voice-listcat-icon svg{ width:15px; height:15px; }
  .list-type-cards{ display:flex; flex-direction:column; gap:8px; }
  .list-type-card{ display:grid; grid-template-columns:40px 1fr; grid-template-rows:auto auto; column-gap:12px; align-items:center; text-align:left;
    padding:12px 14px; border-radius:14px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); cursor:pointer; font-family:'Inter',sans-serif; }
  .list-type-card-icon{ grid-row:1 / span 2; width:40px; height:40px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); }
  .list-type-card-icon svg{ width:22px; height:22px; }
  .list-type-card-label{ font-size:15px; font-weight:600; }
  .list-type-card-desc{ font-size:12.5px; color:var(--muted); }
  /* Prioriteringslista */
  .prio-chip{ flex-shrink:0; margin-left:6px; border:none; cursor:pointer; font-family:'Inter',sans-serif; font-size:11px; font-weight:700;
    padding:3px 9px; border-radius:999px; }
  .prio-chip.prio-high{ background:rgba(224,105,79,0.18); color:#E8876F; border:1px solid rgba(224,105,79,0.45); }
  .prio-chip.prio-medium{ background:rgba(224,185,77,0.16); color:#E0B94D; border:1px solid rgba(224,185,77,0.4); }
  .prio-chip.prio-low{ background:rgba(147,162,178,0.14); color:var(--muted); border:1px solid var(--border-strong); }
  .prio-section-title{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin:12px 0 6px; }
  .prio-section-title:first-child{ margin-top:0; }
  .prio-section-focus{ color:var(--accent); }
  .prio-row.prio-focus{ border-left:3px solid var(--accent); }
  .list-type-badge.priority{ background:rgba(232,135,111,0.16); color:#E8876F; border:1px solid rgba(232,135,111,0.4); }
  .search-type-badge.priority{ background:rgba(232,135,111,0.16); color:#E8876F; }
  /* Typmärke på listor i "Alla listor" */
  .list-type-badge{ flex-shrink:0; margin-left:8px; font-size:10px; font-weight:700; letter-spacing:0.04em; text-transform:uppercase;
    padding:2px 8px; border-radius:999px; font-family:'IBM Plex Mono',monospace; white-space:nowrap; }
  .list-type-badge.shopping{ background:rgba(159,216,160,0.16); color:#9FD8A0; border:1px solid rgba(159,216,160,0.4); }
  .list-type-badge.packing{ background:rgba(127,185,216,0.16); color:#7FB9D8; border:1px solid rgba(127,185,216,0.4); }
  .list-type-badge.wishlist{ background:rgba(231,163,184,0.16); color:#E7A3B8; border:1px solid rgba(231,163,184,0.4); }
  .search-type-badge.birthday{ background:rgba(231,163,184,0.16); color:#E7A3B8; }
  .search-result-title .bd-cake .bd-icon{ width:16px; height:16px; }
  .bd-page-row{ display:flex; align-items:center; gap:12px; cursor:pointer; }
  .bd-page-row .chore-row-body{ flex:1; min-width:0; }
  .bd-title .bd-cake{ display:flex; }
  .bd-title .bd-cake.round .bd-icon{ color:var(--accent); }
  .float-date-opt{ text-align:left; line-height:1.45; }
  .bd-form-card{ border:1px solid var(--border-strong); border-radius:14px; padding:14px 14px 12px; background:rgba(255,255,255,0.02); }
  .bd-notify-wrap{ margin-top:12px; }
  .bd-notify-toggle{ width:100%; justify-content:flex-start; padding:9px 12px; font-size:13px; }
  .bd-notify-toggle .adv-chip-text{ flex:1; text-align:left; }
  .bd-notify-toggle.open::after{ transform:rotate(180deg); }
  .bd-notify-toggle .bd-notify-bell svg{ width:14px; height:14px; }
  .bd-notify-panel{ margin-top:10px; }
  .bd-date-row{ display:flex; gap:8px; align-items:flex-end; }
  .bd-date-row select, .bd-date-row input{ height:46px; box-sizing:border-box; }
  .bd-form-actions{ display:flex; gap:8px; margin-top:12px; }
  .bd-form-actions .btn{ flex:1; }
  .bd-list{ display:flex; flex-direction:column; gap:6px; max-height:42vh; overflow-y:auto; margin-bottom:10px; }
  .bd-row{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--card); cursor:pointer; }
  .bd-row-editing{ border-color:var(--accent); background:var(--accent-soft); }
  .bd-row-today{ border-color:rgba(231,163,184,0.7); }
  .bd-cake{ flex-shrink:0; color:#E7A3B8; display:flex; }
  .bd-cake .bd-icon{ width:22px; height:22px; }
  .bd-main{ flex:1; min-width:0; }
  .bd-name{ font-size:14px; font-weight:600; color:var(--paper); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bd-meta{ font-size:12px; color:var(--muted); }
  .bd-when{ font-size:12px; font-weight:600; color:var(--accent); flex-shrink:0; }
  .bd-notify{ font-size:11px; color:var(--muted); opacity:0.85; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .bd-notify-bell{ display:inline-flex; vertical-align:-2px; margin-right:4px; }
  .bd-notify-bell svg{ width:11px; height:11px; }
  .bd-del{ flex-shrink:0; background:none; border:none; color:var(--muted); font-size:13px; cursor:pointer; padding:4px 6px; }
  .create-menu-item-swatch.swatch-list{background:#9FD8A0;}
  .create-menu-item-swatch.swatch-schedule{background:#7FB9D8;}
  .create-menu-item-swatch.swatch-chore{background:#C99FD8;}
  /* Snabbval-chips i påminnelseformuläret + arket de öppnar. Arket ligger
     position:fixed inuti .overlay (som skapar containing block via
     backdrop-filter) → täcker hela skärmen oavsett modalens skrollning,
     även i liggande läge där .overlay börjar vid 52px. */
  .adv-chip-row{
    display:flex;flex-wrap:wrap;gap:8px;
    border-top:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:12px 0;margin:6px 0 14px;
  }
  .adv-chip{
    display:inline-flex;align-items:center;gap:5px;max-width:100%;
    font-family:'Inter',sans-serif;font-size:12.5px;font-weight:600;color:var(--muted);
    background:var(--ink-bg-alt);border:1px solid var(--border-strong);
    border-radius:999px;padding:7px 12px;cursor:pointer;white-space:nowrap;
    transition:background .15s,color .15s,border-color .15s;
  }
  .adv-chip-text{overflow:hidden;text-overflow:ellipsis;min-width:0;}
  /* Påminnelseformulärets rad: alltid EN rad. Larm och Kategori behåller
     sin bredd (bara ett extremt långt kategorinamn kapas, vid 34 %) — det
     är Upprepa som förkortas med "…" när t.ex. många veckodagar är valda. */
  .adv-chip-row-nowrap{flex-wrap:nowrap;gap:5px;}
  .adv-chip-row-nowrap .adv-chip{flex-shrink:0;padding:7px 9px;font-size:12px;}
  .adv-chip-row-nowrap .adv-chip{overflow:hidden;}
  .adv-chip-row-nowrap .adv-chip-shrink{flex:0 1 auto;min-width:64px;}
  .adv-chip-row-nowrap .adv-chip-capped{flex:0 4 auto;min-width:64px;max-width:32%;}
  .adv-chip::after{content:'▾';font-size:9px;opacity:0.7;margin-left:1px;}
  .adv-chip.active{color:var(--accent);border-color:rgba(var(--accent-rgb),0.45);background:var(--accent-soft);}
  .adv-sheet-backdrop{
    position:fixed;inset:0;z-index:1;
    background:rgba(10,14,20,0.45);
    animation:advFadeIn .15s ease;
  }
  .adv-sheet{
    position:fixed;left:0;right:0;bottom:0;z-index:2;
    width:100%;max-width:520px;margin:0 auto;box-sizing:border-box;
    max-height:78vh;overflow-y:auto;
    background:var(--card-raised);
    border:1px solid var(--border-strong);border-bottom:none;
    border-radius:18px 18px 0 0;
    padding:16px 20px calc(22px + env(safe-area-inset-bottom,0px));
    box-shadow:0 -10px 30px rgba(0,0,0,0.35);
    animation:slideUp .2s ease;
  }
  .adv-sheet-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px;}
  .adv-sheet-title{font-family:'Fraunces',serif;font-size:19px;color:var(--paper);}
  .adv-sheet-done{
    background:var(--accent);color:var(--on-accent);border:none;border-radius:999px;
    padding:7px 16px;font-family:'Inter',sans-serif;font-size:13px;font-weight:700;cursor:pointer;
  }
  .adv-option-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;}
  .adv-option{
    display:flex;align-items:center;justify-content:space-between;
    width:100%;text-align:left;padding:12px 14px;border-radius:10px;
    border:1px solid var(--border-strong);background:var(--ink-bg-alt);
    color:var(--paper);font-family:'Inter',sans-serif;font-size:14px;cursor:pointer;
  }
  .adv-option.active{border-color:var(--accent);color:var(--accent);background:var(--accent-soft);font-weight:600;}
  .adv-option.active::after{content:'✓';font-weight:700;}
  .modal.adv-open{animation:none;}
  @keyframes advFadeIn{from{opacity:0;}to{opacity:1;}}
  .list-item-rows{display:flex;flex-direction:column;gap:3px;margin-bottom:10px;}
  .list-item-row{
    display:flex;align-items:center;gap:8px;
    background:var(--ink-bg-alt);border:1px solid var(--border-strong);
    border-radius:9px;padding:5px 8px;font-size:13.5px;color:var(--paper);
  }
  .list-item-row > .list-item-text{flex:1;min-width:0;}
  .shopping-list-view{display:flex;flex-direction:column;gap:3px;}
  .save-failed-flash{animation:saveFailedFlash 1.5s ease;}
  @keyframes saveFailedFlash{
    0%, 100% { background:transparent; }
    15%, 45% { background:rgba(217,97,79,0.25); }
  }
  .shopping-item-row{
    display:flex;align-items:center;gap:8px;
    background:var(--ink-bg-alt);border:1px solid var(--border-strong);
    border-radius:9px;padding:4px 7px;
  }
  .shopping-item-check{
    width:28px;height:28px;flex-shrink:0;
    border:1.5px solid var(--border-strong);border-radius:7px;
    display:flex;align-items:center;justify-content:center;
    font-size:17px;color:var(--accent);font-weight:700;
    cursor:pointer;
  }
  .shopping-item-row.done .shopping-item-check{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}
  .shopping-item-text{flex:1;min-width:0;font-size:15.5px;color:var(--paper);cursor:pointer;margin-left:4px;}
  .shopping-item-row.done .shopping-item-text{color:var(--muted);text-decoration:line-through;}
  /* Namnet på den som kryssade ska INTE strykas över — text-decoration ärvs
     av inline-barn och kan bara brytas med inline-block. */
  .shopping-item-row.done .list-done-by, .shopping-item-row.done .wishlist-taken-by{display:inline-block;text-decoration:none;color:var(--muted);}
  .shopping-item-remove{flex-shrink:0;font-size:13px;padding:2px 4px;}
  .list-item-drag-handle{
    flex-shrink:0;
    width:20px;height:20px;
    display:flex;align-items:center;justify-content:center;
    font-size:15px;line-height:1;
    color:var(--muted);
    cursor:grab;
    touch-action:none;
  }
  .shopping-item-drag-ghost{opacity:0.4;}
  .shopping-item-row.sortable-chosen{background:var(--ink-bg);}

  .wishlist-taken-by{color:var(--muted);font-size:12px;font-style:italic;}
  .field{margin-bottom:14px;}
  .field label{
    display:block;font-size:11.5px;color:var(--muted);
    font-family:'IBM Plex Mono',monospace;letter-spacing:0.06em;
    text-transform:uppercase;margin-bottom:6px;
  }
  .auth-email-notice{
    font-size:13.5px;
    color:var(--paper);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    margin-bottom:8px;
    word-break:break-word;
  }
  .field select,.field input[type=text],.field input[type=date],.field input[type=time],.field input[type=number],.field textarea{
    width:100%;
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:10px;
    padding:11px 12px;
    color:var(--paper);
    font-family:'Inter',sans-serif;
    font-size:14.5px;
  }
  /* Döljer webbläsarens fula upp/ner-pilar på sifferfält — appen har redan
     tydliga min/max-gränser och etiketter, pilarna tillför bara visuellt brus
     som inte matchar resten av utseendet. */
  input[type=number]::-webkit-outer-spin-button,
  input[type=number]::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
  }
  input[type=number]{
    -moz-appearance:textfield;
  }
  .field input[type=number]{
    text-align:center;
  }
  .timer-setup-row{
    display:flex;align-items:center;justify-content:center;gap:6px;
    margin-top:22px;
  }
  .timer-setup-field{display:flex;flex-direction:column;align-items:center;gap:8px;}
  .timer-setup-field input[type=number], .timer-setup-field input.timer-num{
    width:72px;
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:12px;
    padding:14px 4px;
    color:var(--paper);
    font-family:'IBM Plex Mono',monospace;
    font-size:26px;
    font-weight:700;
    text-align:center;
  }
  .timer-setup-field label{
    font-size:11px;color:var(--muted);
    text-transform:uppercase;letter-spacing:0.04em;
  }
  .timer-setup-colon{
    font-family:'IBM Plex Mono',monospace;
    font-size:26px;font-weight:700;color:var(--muted);
    margin-top:-20px;
  }
  /* Nedräkningens visningsvy: dagar/timmar/minuter/sekunder i egna rutor */
  .countdown-big{
    display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
    margin:4px 0 10px;
  }
  .cd-big-seg{
    flex:1 1 0;min-width:52px;text-align:center;
    background:var(--ink-bg-alt);border:1px solid var(--border);border-radius:12px;
    padding:10px 4px 8px;
  }
  .cd-big-num{
    font-family:'IBM Plex Mono',monospace;font-size:24px;font-weight:700;color:var(--accent);
    line-height:1.1;
  }
  .cd-big-label{
    font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:0.04em;margin-top:2px;
  }
  .countdown-big-date{ font-size:12.5px;color:var(--muted);text-align:center;margin-bottom:14px; }
  .countdown-big.hg-cd{ flex-wrap:nowrap; gap:4px; margin:auto 0 0; padding-top:4px; flex-shrink:0; }
  .hg-cd .cd-big-seg{ min-width:0; padding:4px 2px 3px; border-radius:8px; }
  .hg-cd .cd-big-num{ font-size:15px; }
  .hg-cd .cd-big-label{ font-size:8.5px; letter-spacing:0.02em; }
  .countdown-big.hg-cd-days{ margin:auto 0 2px; }
  .hg-cd-days .cd-big-seg{ padding:0; background:none; border:none; }
  .hg-cd-days .cd-big-num{ font-size:22px; }
  .hg-cd-days .cd-big-label{ font-size:9px; margin-top:0; }
  /* Samma utseende för fristående textfält utanför .field (t.ex. "Bjud in en
     vän"-fältet) — annars faller de tillbaka på webbläsarens ostylade standard. */
  input[type=text]{
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:10px;
    padding:11px 12px;
    color:var(--paper);
    font-family:'Inter',sans-serif;
    font-size:14.5px;
  }
  textarea{
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:10px;
    padding:11px 12px;
    color:var(--paper);
    font-family:'Inter',sans-serif;
    font-size:14.5px;
    box-sizing:border-box;
  }
  .field textarea{resize:vertical;min-height:60px;}
  .toggle-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
  .toggle-row label{font-size:13.5px;color:var(--paper);font-family:'Inter',sans-serif;}
  .logged-out-gate{
    min-height:100vh;
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    padding:32px 24px;
    text-align:center;
  }
  .logged-out-gate-icon{
    height:56px;width:auto;
    display:flex;align-items:center;justify-content:center;
    color:var(--accent);
    margin-bottom:18px;
  }
  .logged-out-gate-icon svg{height:100%;width:auto;display:block;}
  .logged-out-gate-title{
    font-family:'Fraunces',serif;font-size:24px;font-weight:700;
    color:var(--paper);margin:0 0 32px 0;
  }
  .logged-out-gate-login-box{
    width:100%;max-width:340px;
    background:linear-gradient(160deg,var(--card-raised),var(--card));
    border:1px solid rgba(var(--accent-rgb),0.35);
    box-shadow:0 12px 32px rgba(0,0,0,0.35);
    border-radius:18px;
    padding:24px 22px;
  }
  .logged-out-gate-login-title{
    font-family:'Fraunces',serif;font-size:19px;font-weight:700;
    color:var(--paper);margin-bottom:8px;
  }
  .logged-out-gate-login-desc{
    font-size:13px;color:var(--muted);line-height:1.5;
  }
  .logged-out-gate-offline-desc{
    font-size:11.5px;color:var(--muted);line-height:1.5;
    max-width:280px;margin-top:6px;
  }
  .sync-info{
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:12px;
    padding:14px 15px;
    margin-bottom:6px;
  }
  .sync-info-title{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;letter-spacing:0.06em;text-transform:uppercase;
    color:var(--accent);margin-bottom:6px;
  }
  .sync-info-text{font-size:12.5px;color:var(--muted);line-height:1.55;}
  /* Kompakta inställningsrutor + klickbart "?" som fäller ut beskrivningen.
     Ren CSS-växling (klassen help-open på .sync-info), ingen omritning. */
  .sync-info-compact{ padding:10px 15px; }
  .settings-label-row{ display:flex;align-items:center;min-width:0; }
  .settings-help-btn{
    position:relative;flex-shrink:0;
    width:20px;height:20px;margin-left:8px;padding:0;
    display:inline-flex;align-items:center;justify-content:center;
    border-radius:50%;border:1px solid var(--border-strong);
    background:transparent;color:var(--muted);
    font-family:'Inter',sans-serif;font-size:11.5px;font-weight:700;
    line-height:1;letter-spacing:0;text-transform:none;cursor:pointer;
    transition:background .15s,color .15s,border-color .15s;
  }
  .settings-help-btn::after{ content:'';position:absolute;inset:-10px; } /* större tryckyta */
  .sync-info.help-open .settings-help-btn{
    background:var(--accent-soft);color:var(--accent);border-color:var(--accent);
  }
  .settings-help-text{ display:none; }
  .sync-info.help-open .settings-help-text{ display:block;animation:settingsHelpIn .18s ease-out; }
  @keyframes settingsHelpIn{ from{ opacity:0;transform:translateY(-3px); } to{ opacity:1;transform:none; } }
  /* Utloggat läge specifikt — samma storlek och knapp som den vanliga
     rutan, men varmare och mer inbjudande: en guldton bakgrund/kant och
     en liten glöd, så den faktiskt syns och känns som en positiv
     inbjudan istället för bara ännu en informationsruta bland alla
     andra i Inställningar. */
  .sync-info-invite{
    background:linear-gradient(135deg, rgba(var(--accent-rgb),0.16), rgba(var(--accent-rgb),0.05));
    border:1px solid rgba(var(--accent-rgb),0.45);
    box-shadow:0 0 0 1px rgba(var(--accent-rgb),0.08), 0 4px 18px rgba(var(--accent-rgb),0.15);
  }
  .sync-info-invite .sync-info-title{
    font-family:inherit; text-transform:none; letter-spacing:normal;
    font-size:14.5px; font-weight:700; color:var(--paper);
  }
  .sync-info-invite .sync-info-text{ color:var(--paper); opacity:0.85; }
  .notif-info{
    font-size:12.5px;color:var(--muted);line-height:1.55;
    margin-bottom:10px;
  }
  /* "Ny här?"-tipset vid inloggningsknappar/-rutor: visar att samma
     inloggning även skapar ett konto (signInWithOtp har
     shouldCreateUser:true). Liten guldpill + dämpad text, tema-säker. */
  .auth-new-hint{
    font-size:12px;color:var(--muted);line-height:1.5;
    margin-top:10px;text-align:center;
  }
  .auth-new-hint-left{ text-align:left;margin-top:0; }
  .auth-new-hint-tag{
    display:inline-block;padding:1px 8px;margin-right:6px;
    border-radius:999px;background:var(--accent-soft);
    color:var(--accent);font-weight:700;font-size:11px;
    letter-spacing:0.02em;vertical-align:1px;
  }

  .field-label-row{
    font-size:11.5px;color:var(--muted);
    font-family:'IBM Plex Mono',monospace;letter-spacing:0.06em;
    text-transform:uppercase;margin:18px 0 8px 0;
  }
  .btn-link{
    display:block;
    background:none;border:none;
    color:var(--accent);
    font-family:'Inter',sans-serif;
    font-size:12.5px;font-weight:600;
    padding:4px 0;
    cursor:pointer;
    text-align:left;
    margin-bottom:6px;
  }
  .logged-in-row{
    display:flex;align-items:center;justify-content:space-between;
    background:var(--green-soft);
    border:1px solid rgba(95,167,119,0.35);
    border-radius:12px;
    padding:12px 14px;
    font-size:13px;
    color:var(--paper);
    margin-bottom:8px;
  }
  .data-btn-row{display:flex;gap:10px;margin-bottom:18px;}
  .data-btn-row .btn{padding:11px;font-size:13px;}
  #searchResults{max-height:50vh;overflow-y:auto;margin-bottom:6px;}
  .search-result-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:12px;
    padding:12px 14px;
    margin-bottom:8px;
    cursor:pointer;
  }
  .search-result-row:hover{border-color:var(--accent);}
  .search-result-main{min-width:0;}
  .search-result-title{font-size:14.5px;font-weight:500;color:var(--paper);}
  .search-type-badge{
    flex-shrink:0;
    font-family:'IBM Plex Mono',monospace;
    font-size:10px;font-weight:600;letter-spacing:0.04em;text-transform:uppercase;
    padding:4px 9px;border-radius:999px;
    white-space:nowrap;
  }
  .search-type-badge.reminder{background:var(--accent-soft);color:var(--accent);border:1px solid rgba(var(--accent-rgb),0.4);}
  .search-type-badge.schedule{background:rgba(127,185,216,0.18);color:#7FB9D8;border:1px solid rgba(127,185,216,0.4);}
  .search-type-badge.list{background:rgba(159,216,160,0.18);color:#9FD8A0;border:1px solid rgba(159,216,160,0.4);}
  .search-type-badge.chore{background:rgba(201,159,216,0.18);color:#C99FD8;border:1px solid rgba(201,159,216,0.4);}
  .search-result-meta{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px;color:var(--muted);
    margin-top:3px;
  }
  .mono-area{
    width:100%;
    min-height:140px;
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:10px;
    padding:11px 12px;
    color:var(--paper);
    font-family:'IBM Plex Mono',monospace;
    font-size:11.5px;
    line-height:1.5;
    resize:vertical;
  }
  .import-error{
    color:var(--red);
    font-size:12.5px;
    margin:-6px 0 10px 0;
    min-height:16px;
  }
  input[type=file]{
    width:100%;
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:12.5px;
  }
  .switch{
    width:42px;height:24px;border-radius:999px;
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    position:relative;cursor:pointer;flex-shrink:0;
  }
  .switch .knob{
    position:absolute;top:2px;left:2px;
    width:18px;height:18px;border-radius:50%;
    background:var(--muted);
    transition:left .15s, background .15s;
  }
  .switch.on{background:var(--accent-soft);border-color:var(--accent);}
  .switch.on .knob{left:20px;background:var(--accent);}
  .switch-lg{width:52px;height:30px;}
  .switch-lg .knob{width:24px;height:24px;}
  .switch-lg.on .knob{left:24px;}
  .share-box{
    background:var(--card-raised);
    border:1.5px solid rgba(var(--accent-rgb),0.3);
    border-radius:14px;
    padding:16px;
    margin-bottom:18px;
  }
  .share-box-head{display:flex;align-items:center;justify-content:space-between;gap:14px;}
  .share-box-title{font-size:15px;font-weight:600;color:var(--paper);}
  .share-box-sub{font-size:12px;color:var(--muted);margin-top:2px;}
  .modal-actions{display:flex;gap:10px;margin-top:6px;}
  .btn{
    flex:1;padding:12px;border-radius:11px;border:none;
    font-family:'Inter',sans-serif;font-weight:600;font-size:14px;cursor:pointer;
  }
  .btn-primary{background:var(--accent);color:var(--on-accent);}
  .btn-secondary{background:transparent;border:1px solid var(--border-strong);color:var(--paper);}
  .btn-danger{background:transparent;border:1px solid rgba(217,97,79,0.4);color:var(--red);}
  .btn:disabled{opacity:0.4;cursor:not-allowed;}
  .btn-row-secondary{display:flex;gap:10px;margin-top:10px;}

  .notif-toggle-btn{
    width:100%;
    margin-bottom:0;
    margin-top:12px;
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:9px;
    text-align:left;
    font-size:13.5px;
  }
  .notif-toggle-dot{
    width:9px;height:9px;
    border-radius:50%;
    flex-shrink:0;
    background:var(--muted);
  }
  .notif-toggle-on{
    background:var(--green-soft);
    border:1px solid rgba(95,167,119,0.4);
    color:var(--paper);
  }
  .notif-toggle-on .notif-toggle-dot{background:var(--green);}

  .custom-rec-row{display:flex;gap:8px;align-items:center;}
  .custom-rec-row input[type=number]{
    width:64px;flex-shrink:0;
    background:var(--ink-bg-alt);
    border:1px solid var(--border-strong);
    border-radius:10px;
    padding:11px 10px;
    color:var(--paper);
    font-family:'Inter',sans-serif;
    font-size:14.5px;
  }
  .custom-rec-row select{flex:1;}
  .weekday-picker{display:flex;gap:6px;flex-wrap:wrap;}
  .wd-btn{
    width:38px;height:38px;
    border-radius:10px;
    border:1px solid var(--border-strong);
    background:var(--ink-bg-alt);
    color:var(--muted);
    font-family:'Inter',sans-serif;
    font-size:12px;font-weight:600;
    cursor:pointer;
  }
  .wd-btn.active{background:var(--accent);border-color:var(--accent);color:var(--on-accent);}

  @media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
    /* Enbart mobiler i landskapsläge (inte plattor/datorer, som redan får
       sin egen bredare layout ovan) — bygger om HELA layouten till en
       vänster sidopanel istället för topp-header + botten-flikrad, så att
       den dyrbara höjden helt återlämnas till själva innehållet (kalendern
       m.m.), och den annars bortkastade extra BREDDEN (som ett liggande
       mobilskärm har gott om) används istället.
       36px bred panel: bara ikoner, ingen text — plats saknas för det i en
       så smal kolumn liggande ner.
    */
    #app{
      max-width:none;
      padding-left:52px;
      padding-top:14px;
      padding-bottom:0;
    }
    header.top{
      position:fixed; top:0; left:0; width:52px;
      flex-direction:column; align-items:center; justify-content:flex-start;
      padding:8px 6px; gap:6px;
      z-index:55;
      background:var(--ink-bg);
      border-right:1px solid var(--border);
    }
    header.top .brand{ display:none; } /* ingen plats för appnamnet i en så smal kolumn */
    .app-icon-mini{ display:none; } /* tar onödig plats — behövs inte i den smala sidopanelen */
    .header-search-btn{ width:38px; height:38px; border-radius:10px; }
    .header-search-btn svg{ width:18px; height:18px; }
    .home-quick-badge{ min-width:14px; height:14px; font-size:8.5px; }
    /* Ordningen bland de tre knapparna (meny/vänner/notiser) — oberoende
       av vilken ordning de faktiskt ligger i i koden. Menyn överst, vänner
       i mitten, notiser underst. */
    #topMenuBtn{ order:1; }
    #openFriendsQuickBtn{ order:2; }
    #openNotificationsBtn{ order:3; }

    nav.tabs{
      position:fixed; bottom:0; left:0; right:auto; top:auto;
      width:52px;
      background:var(--ink-bg);
      border-right:1px solid var(--border);
      padding:0;
      display:flex; align-items:center;
    }
    .tabs-row{ max-width:none; padding:0; width:100%; margin-bottom:10px; }
    .tabs-inner{
      flex-direction:column; border-radius:16px;
      width:40px; margin:0 auto;
    }
    .tab-btn{
      padding:10px 0; border-radius:12px; writing-mode:horizontal-tb;
      display:flex; align-items:center; justify-content:center;
    }
    /* Hem/Kalender/Schema blir bara ikoner i landskapsläge — för brett med
       text i en så smal, lodrät panel. */
    .tab-btn-icon-only{ display:flex; }
    .tab-btn-label{ display:none; }
    .tabs-divider{ width:60%; height:1px; margin:2px auto; }

    /* Dropdown-menyn (öppnas från "tre strecken") positioneras om till att
       dyka upp bredvid vänsterpanelen istället för uppe till höger, som i
       vanliga mobilläget — annars hamnade den mitt i tomma intet. */
    .top-menu-dropdown{ top:8px; left:56px; right:auto; }

    .month-header{ margin-bottom:6px; }
    /* I vanligt (stående) läge wrappar switchern till en egen rad (se
       grundregeln för .schedule-view-switcher) — här i landskapsläget ska
       den istället vara kvar inline, mellan datumet och bakåt/framåt. */
    .month-header .schedule-view-switcher{ flex-basis:auto !important; order:2 !important; margin-top:0 !important; }
    .month-header .month-nav-group{ order:3 !important; }
    .weekday-row{ margin-bottom:2px; }
    .month-grid{ gap:2px; }
    /* Höjden räknas direkt ut från den FAKTISKA skärmhöjden (100vh) minus en
       uppskattning av allt annat som tar plats däromkring (header-padding,
       datumrubrik, veckodags-raden, mellanrum) — mer tillförlitligt än att
       gissa en aspect-ratio (som bara band höjden till cellens BREDD, helt
       orelaterat till om det faktiskt fanns plats i höjdled på just den
       enheten). */
    .day-cell{ aspect-ratio:auto !important; height:calc((100vh - 85px) / 6) !important; }
    .day-cell .num{ top:3px; left:5px; font-size:11px; }
    .day-count-badge{ top:50%; bottom:auto; right:6px; transform:translateY(-50%); font-size:7px; padding:1px 3px; }
    /* Grön bock på samma plats som "2/3"-märket (höger, vertikalt centrerad) */
    .day-cell .day-done-check{ top:50%; bottom:auto; left:auto; right:6px; transform:translateY(-50%); width:12px; height:12px; }
    .day-cell .day-done-check svg{ width:8px; height:8px; }
    /* Förklarings-raden (Gjort/Påbörjat/Försenat) döljs helt här — det
       frigjorda utrymmet går istället till att göra själva dagcellerna
       lite större, snarare än att lämna ett tomt, konstigt mellanrum
       ovanför en text som ändå riskerade klippas av i botten. */
    .legend{ display:none !important; }

    /* Hem-fliken: "uppgifter klara" flyttas från en egen rad UNDER datumet
       till en liten, egen ruta till HÖGER om det, inom samma Idag-ruta —
       gör Idag-rutan mycket lägre, så mer av Hem-flikens innehåll (helst
       allt) får plats utan att behöva skrolla. */
    .today-card{
      display:flex; align-items:center; justify-content:flex-start; gap:14px;
      padding:16px 18px;
    }
    .today-main-info{ flex:0 0 50%; min-width:0; }
    .today-row{ margin-bottom:10px; }
    .home-big-btn{ margin-bottom:0; }
    .today-sub{
      margin-top:0; flex-shrink:0;
      background:var(--card); border:1px solid var(--border-strong);
      border-radius:12px; padding:8px 12px;
      font-size:11.5px; text-align:center;
      flex-direction:column; gap:2px;
    }

    /* En riktig, tydlig gul knapp med "Tillbaka" fullt synligt — den
       tidigare varianten (dold text bakom en ring-ikon) visade sig inte
       dölja texten helt tillförlitligt överallt. Flyter till vänster om
       den nu centrerade rubriken. */
    .back-row{
      position:absolute; top:10px; left:62px; z-index:10;
      margin-bottom:0;
      display:inline-flex; align-items:center; justify-content:center;
      width:auto; height:auto;
      padding:8px 16px;
      border-radius:999px;
      background:var(--accent); color:var(--on-accent);
      font-size:13px; font-weight:600;
      white-space:nowrap;
    }
    .day-view-header{ text-align:center; margin-top:6px; }

    /* Den gula knappens positionering var uträknad för vanliga lägets
       centrerade app-bredd (50% - halva maxbredden) — helt fel formel här,
       eftersom appen inte längre är centrerad eller begränsad i bredd i
       landskapsläge. Ingen botten-flikrad att hålla avstånd till längre
       heller (den ligger numera i vänsterpanelen) — flyttas därför enkelt
       till nedre högra hörnet istället. */
    .fab{ bottom:16px; right:16px; }
    .fab-mini{ bottom:16px; right:16px; }
    .fab-mini-panel{ bottom:86px; right:8px; }
    .fab-quick{ bottom:16px; right:78px; width:min(460px, calc(100vw - 200px)); }

    /* Skapa-menyn: bredare, och alternativen i rader istället för en lång,
       staplad lista — annars räcker inte höjden till för att visa alla åtta
       utan att skrolla. Ordningen i själva items-arrayen (se
       renderCreateMenu) är: 1 Påminnelse, 2 Syssla, 3 Inköp, 4 Packning,
       5 Önskelista, 6 Anteckning, 7 Nedräkning, 8 Schema — grupperad i tre
       rader (2+3+3) nedan via deras plats bland create-menu-boxens barn
       (huvudet räknas som barn nr 1, så knapparna blir nr 2 till 9).
    */
    #createMenuBox{
      display:flex; flex-wrap:wrap; gap:8px;
      max-width:640px;
    }
    .create-menu-head{ flex:1 0 100%; }
    .modal-actions{ flex:1 0 100%; margin-top:0 !important; }
    .create-menu-item{ width:auto; margin-bottom:0; }
    .create-menu-item:nth-child(2), .create-menu-item:nth-child(3){ flex:1 0 calc(50% - 4px); }
    .create-menu-item:nth-child(4), .create-menu-item:nth-child(5), .create-menu-item:nth-child(6),
    .create-menu-item:nth-child(7), .create-menu-item:nth-child(8), .create-menu-item:nth-child(9){
      flex:1 0 calc(33.33% - 6px);
    }

    /* Röstwizardens första steg (typval) — samma breddning och samma
       princip (tre per rad istället för två) som skapa-menyn ovan. */
    #voiceModalBox{ max-width:640px; padding:14px 20px 16px 20px; }
    .voice-type-grid{ grid-template-columns:1fr 1fr 1fr; }
    /* Samma princip för guidens övriga rutnät (rubrik/dag/tid/valfria
       fält, samt vän-listan vid "dela med vänner") — byggda i en senare
       omgång än typvalet ovan, och missade av samma anledning samma
       breddning då. Inline-stilade i koden (grid-template-columns:1fr 1fr),
       kräver !important för att kunna åsidosättas härifrån utan att ändra
       själva koden. */
    #voiceFieldGrid{ grid-template-columns:1fr 1fr 1fr !important; }
    #voiceModalBox [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr 1fr 1fr !important; }
    /* Mikrofon-ikonen (inline-stilad i koden, färgen/animationen beror på
       om den lyssnar just då) — krymps här med !important, det enda sättet
       att åsidosätta en inline-stil utan att behöva ändra själva koden. */
    #voiceModalBox > div:first-child{ width:36px !important; height:36px !important; margin:0 auto 6px !important; }
    #voiceModalBox h3{ font-size:15px; margin-bottom:4px; }
    #voiceModalBox .modal-actions{ margin-top:10px !important; }

    /* "Min QR-kod" — QR-koden till vänster, texten till höger, så man
       slipper skrolla för att se hela koden i landskapsläge. */
    #myQrBox{
      display:flex; align-items:center; gap:18px; text-align:left;
      max-width:600px;
    }
    .my-qr-image-col{ flex-shrink:0; width:150px; }
    .my-qr-image-col img{ max-width:150px !important; }
    .my-qr-text-col{ flex:1; min-width:0; }
    .my-qr-text-col h3{ text-align:left; }

    /* Skapa-/redigera-formulären (påminnelse, syssla, lista m.fl.) —
       breddas rejält (som skapa-menyn ovan) och avstånden mellan fälten
       komprimeras, så mindre skrollning behövs. En riktig flerkolumns-
       ombyggnad hade krävt mer visuell testning än vad som är möjligt
       härifrån just nu — det här är ett första, försiktigare steg. */
    #modalBox, #choreModalBox, #noteModalBox, #countdownModalBox{
      max-width:700px;
      padding:14px 20px 16px 20px;
    }
    #modalBox .field, #choreModalBox .field,
    #noteModalBox .field, #countdownModalBox .field{ margin-bottom:8px; }
    #modalBox .toggle-row, #choreModalBox .toggle-row,
    #noteModalBox .toggle-row, #countdownModalBox .toggle-row{ margin-bottom:8px; }
    #modalBox h3, #choreModalBox h3{ font-size:16px; margin-bottom:6px; }
    #modalBox .modal-actions, #choreModalBox .modal-actions{ margin-top:10px !important; }

    /* Extra-påminnelse-rutan — tre alternativ per rad istället för två,
       knapparna görs något smalare (mindre padding, mindre text) för att
       få plats med den tredje kolumnen. */
    .secondary-reminder-grid{ grid-template-columns:1fr 1fr 1fr; }
    .secondary-reminder-opt{ padding:10px 6px; font-size:11.5px; }

    /* Overlayn centrerar sitt innehåll (modalen) mot HELA skärmens bredd,
       utan att veta att de vänstra 52px är upptagna av panelen — modalen
       hamnade därför synligt förskjuten åt vänster, delvis bakom panelen.
       Kompenserar genom att lägga tillbaka precis den bredden som
       vänster-padding, så mittpunkten för centreringen räknas ut från
       resten av skärmen istället.

       VIKTIGT: left:52px (inte bara padding-left) — overlayens egen
       mörka/blurrade BAKGRUND ska aldrig rendera ÖVER sidopanelens yta
       alls. Båda knapp-panelerna (header.top och nav.tabs) ligger visserligen
       ovanpå overlayen ändå (högre z-index), men mellanrummet MELLAN dem
       delar annars bakgrundsfärg med panelerna och syns inte som en egen
       yta — förrän overlayens bakgrund la sig i just det mellanrummet och
       gjorde det synligt mörkare, vilket upplevdes som ett falskt glapp
       mellan knapparna. Med left:52px täcker overlayen aldrig den ytan
       alls, så mellanrummet förblir osynligt precis som vanligt. */
    .overlay{ left:52px; padding-left:0; }
  }


  /* Toast (notis i appen) och synk-pill — riktade DOM-tillägg, ovanför bottenmenyn (60) och FAB (61–62) */
  #appToastHost{position:fixed;left:0;right:0;bottom:calc(84px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;align-items:center;gap:8px;z-index:70;pointer-events:none;}
  .app-toast{pointer-events:auto;max-width:min(92vw,420px);display:flex;align-items:center;gap:12px;background:var(--card-raised);color:var(--paper);border:1px solid var(--border);border-radius:12px;padding:10px 14px;font-size:14px;line-height:1.3;box-shadow:0 6px 24px rgba(0,0,0,0.35);opacity:0;transform:translateY(10px);transition:opacity .2s ease,transform .2s ease;}
  .app-toast.show{opacity:1;transform:translateY(0);}
  .app-toast-text{flex:1;}
  .app-toast-action{flex-shrink:0;background:none;border:none;color:var(--accent);font-weight:700;font-size:14px;padding:4px 6px;cursor:pointer;}
  .sync-status-pill{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:69;background:rgba(var(--accent-rgb),0.16);color:var(--accent);border:1px solid var(--accent);border-radius:999px;padding:6px 12px;font-size:12px;font-family:'IBM Plex Mono',monospace;letter-spacing:0.03em;cursor:pointer;}
  .sync-status-pill.busy{opacity:0.6;}
  .voice-multi-list{margin-top:14px;text-align:left;display:flex;flex-direction:column;gap:8px;}
  .voice-multi-card{display:flex;align-items:center;gap:12px;background:var(--ink-bg-alt);border:1px solid var(--border-strong);border-radius:10px;padding:10px 12px;}
  .voice-multi-time{flex-shrink:0;width:86px;color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:13px;font-weight:600;}
  .voice-multi-title{flex:1;min-width:0;color:var(--paper);font-size:14.5px;overflow-wrap:anywhere;}
  .voice-ampm-flip{display:inline-block;margin-left:6px;padding:1px 7px;border:1px solid var(--accent);border-radius:999px;background:transparent;color:var(--accent);font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;cursor:pointer;vertical-align:middle;}
  .voice-multi-time .voice-ampm-flip{display:block;margin:4px 0 0;width:max-content;}
  .voice-multi-day{display:block;font-size:11.5px;color:var(--muted);margin-top:2px;}
  .voice-multi-new{animation:voiceMultiIn 1.2s ease-out;}
  @keyframes voiceMultiIn{
    0%{opacity:0;transform:translateY(-6px);border-color:var(--accent);background:rgba(var(--accent-rgb),0.22);}
    25%{opacity:1;transform:translateY(0);}
    100%{border-color:var(--border-strong);background:var(--ink-bg-alt);}
  }
  @media (prefers-reduced-motion: reduce){ .voice-multi-new{animation:none;} }
  .alarm-badge{
    display:inline-block;color:var(--red);border:1.5px solid var(--red);border-radius:6px;
    padding:0 6px;font-size:11px;font-weight:700;line-height:1.5;letter-spacing:0.02em;
    vertical-align:middle;white-space:nowrap;
  }
  .list-done-by{font-size:11px;color:var(--muted);white-space:nowrap;}
  .app-toast-close{flex-shrink:0;background:none;border:none;color:var(--muted);font-size:18px;line-height:1;padding:0 2px 0 6px;cursor:pointer;}
  @media (prefers-reduced-motion: reduce){ .app-toast{transition:none;} }
  /* Laddningsskärmen: logga + tre guldstreck som pulserar i tur och ordning
     (samma streck som i loggans "e") + text. */
  .app-loading{
    min-height:100vh;min-height:100dvh;box-sizing:border-box;padding:32px 24px;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
    background:var(--ink-bg);
  }
  .app-loading-logo{height:58px;max-width:80vw;}
  .app-loading-bars{display:flex;flex-direction:column;gap:5px;width:34px;}
  .app-loading-bars span{display:block;height:5px;border-radius:3px;background:var(--accent);opacity:0.25;animation:appLoadingBar 1.2s ease-in-out infinite;}
  .app-loading-bars span:nth-child(2){animation-delay:.15s;}
  .app-loading-bars span:nth-child(3){animation-delay:.3s;}
  @keyframes appLoadingBar{0%,100%{opacity:0.25;transform:scaleX(0.7);}40%{opacity:1;transform:scaleX(1);}}
  .app-loading-text{min-height:1.5em;max-width:320px;text-align:center;color:var(--muted);font-family:'IBM Plex Mono',monospace;font-size:13px;line-height:1.5;}
  @media (prefers-reduced-motion: reduce){ .app-loading-bars span{animation:none;opacity:0.7;} }
/* Egna larmljud (Inställningar → Notifikationer) */
.alarm-sound-list{ margin-top:10px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.alarm-sound-row{ display:flex; align-items:center; gap:6px; padding:0 10px; border-bottom:1px solid var(--border); }
.alarm-sound-row:last-child{ border-bottom:none; }
.alarm-sound-row.on{ background:var(--accent-soft); }
.alarm-sound-pick{ flex:1; display:flex; align-items:center; gap:10px; min-width:0; background:none; border:none; color:var(--paper); padding:11px 0; text-align:left; cursor:pointer; font-family:'Inter',sans-serif; }
.alarm-sound-radio{ color:var(--accent); font-size:15px; width:16px; flex-shrink:0; }
.alarm-sound-text{ display:flex; flex-direction:column; min-width:0; }
.alarm-sound-name{ font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.alarm-sound-sub{ font-size:11.5px; }
.alarm-sound-del{ color:var(--red); }

/* ============================================================
   Stora skärmar (datorer, stora plattor) i liggande läge: innehållet hålls
   i en läsbar bredd (1240 px, centrerat) — sidomenyn och plus-knappen
   följer med innehållets kanter istället för att ligga längst ut vid
   skärmens kanter med ett stort tomrum emellan.
   ============================================================ */
@media (orientation:landscape) and (min-width:1400px) and (pointer:coarse){
  header.top, nav.tabs{ left:calc(50% - 620px) !important; }
  .fab, .fab-mini{ right:calc(50% - 620px + 16px) !important; }
  .fab-mini-panel{ right:calc(50% - 620px + 8px) !important; }
  .fab-quick{ right:calc(50% - 620px + 78px) !important; }
}

/* ============================================================
   "Lägg till på Hem": kort med förhandsbild, två per rad
   ============================================================ */
#homeGridPickerBox{ max-width:460px; }
.hg-pick-section{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin:12px 0 6px; }
.hg-pick-section:first-child{ margin-top:0; }
.hg-pick-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.hg-pick-card{ display:flex; align-items:center; gap:9px; min-width:0; padding:7px 8px; border-radius:12px; border:1px solid var(--border-strong);
  background:var(--ink-bg-alt); color:var(--paper); cursor:pointer; text-align:left; font-family:'Inter',sans-serif; }
.hg-pick-card:active{ transform:scale(0.98); }
.hg-pick-card-label{ font-size:12.5px; font-weight:600; line-height:1.2; min-width:0; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* Själva "bilden" */
.hgpv{ flex-shrink:0; width:46px; height:38px; border-radius:8px; background:var(--card); border:1px solid var(--border); padding:4px 5px; box-sizing:border-box;
  display:flex; flex-direction:column; justify-content:center; gap:3px; position:relative; overflow:hidden; }
.hgpv-line{ display:block; height:3px; border-radius:2px; background:var(--border-strong); }
.hgpv-ic{ display:flex; width:13px; height:13px; color:var(--accent); }
.hgpv-ic svg{ width:13px; height:13px; }
.hgpv-ic.hgpv-pink{ color:#E7A3B8; } .hgpv-ic.hgpv-orange{ color:#E8876F; }
.hgpv-txt{ font-size:10px; font-weight:700; color:var(--paper); line-height:1; }
.hgpv-big{ font-family:'Fraunces',serif; font-size:17px; font-weight:700; line-height:1; }
.hgpv-red{ color:var(--red); }
.hgpv-today{ display:flex; align-items:center; justify-content:center; height:100%; }
.hgpv-today b{ font-size:17px; color:var(--paper); }
.hgpv-ribbon{ position:absolute; top:-4px; right:-8px; width:22px; height:9px; background:var(--accent); transform:rotate(38deg); }
.hgpv-btn{ display:block; height:16px; border-radius:5px; background:var(--accent); }
.hgpv-clock{ font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700; color:var(--accent); text-align:center; }
.hgpv-dots{ display:flex; gap:4px; justify-content:center; }
.hgpv-dots i{ width:9px; height:9px; border-radius:50%; background:var(--border-strong); display:block; }
.hgpv-checks{ display:flex; flex-direction:column; gap:4px; position:absolute; left:5px; top:9px; }
.hgpv-checks i{ width:6px; height:6px; border-radius:50%; border:1.5px solid var(--accent); display:block; }
.hgpv-k-auto-my-turn .hgpv-line{ margin-left:10px; }
.hgpv-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:1.5px; }
.hgpv-week i{ display:block; height:14px; border-radius:2px; background:var(--green); opacity:0.75; }
.hgpv-week i:nth-child(4){ background:var(--accent); opacity:1; }
.hgpv-week i:nth-child(n+5){ background:var(--border-strong); opacity:1; }

/* ============================================================
   Nya hemrutor: Timer, Din tur, Veckan
   ============================================================ */
.hg-timer .hg-content{ display:flex; flex-direction:column; justify-content:center; }
.hg-timer-presets{ display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
.hg-timer-chip{ flex:1; min-width:0; padding:7px 4px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper);
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.hg-timer-chip.hg-timer-own{ color:var(--accent); }
.hg-timer-top{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-timer-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.hg-timer-clock{ font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:700; color:var(--accent); letter-spacing:0.02em; line-height:1.1; }
.hg-timer-clock.paused{ color:var(--muted); }
.hg-timer-ctrls{ display:flex; gap:6px; flex-shrink:0; }
.hg-timer-btn{ width:34px; height:34px; border-radius:50%; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); font-size:12px; cursor:pointer; }
.hg-myturn .hg-line{ display:flex; align-items:center; gap:7px; }
.hg-turn-check{ flex-shrink:0; width:16px; height:16px; border-radius:50%; border:1.5px solid var(--accent); background:none; padding:0; cursor:pointer; }
.hg-turn-check.done{ background:var(--green); border-color:var(--green); }
.hg-turn-title{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hg-turn-wait{ flex-shrink:0; font-size:11px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.hg-week-tile .hg-content{ display:flex; align-items:stretch; }
.hg-week{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; width:100%; }
.hg-wk-day{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; min-width:0; border-radius:10px; border:1px solid var(--border);
  background:var(--ink-bg-alt); color:var(--paper); cursor:pointer; padding:4px 0; font-family:'Inter',sans-serif; }
.hg-wk-day.today{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent) inset; }
.hg-wk-name{ font-size:10px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.hg-wk-num{ font-size:15px; font-weight:700; line-height:1.1; }
.hg-wk-sum{ font-size:9.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.hg-wk-day.hg-wk-green{ background:rgba(95,167,119,0.28); } .hg-wk-day.hg-wk-yellow{ background:rgba(224,185,77,0.28); } .hg-wk-day.hg-wk-red{ background:rgba(217,97,79,0.30); }
.hg-timer-presets.narrow{ gap:4px; flex-wrap:nowrap; }
.hg-timer-presets.narrow .hg-timer-chip{ padding:7px 2px; font-size:12px; }
.hg-timer-presets.narrow .hg-timer-own{ flex:0 0 30px; }
.hg-timer-narrow .hg-timer-clock{ font-size:21px; }
.hg-timer-narrow .hg-timer-btn{ width:28px; height:28px; font-size:10px; }
.hg-timer-narrow .hg-timer-ctrls{ gap:4px; }

/* ============================================================
   Hemrutor: minikalender, framsteg, schema, kalenderhändelse, delat,
   snabbskapa, genvägar, "nästa" stort
   ============================================================ */
.hg-rel{ font-size:13px; font-weight:700; color:var(--accent); margin-top:2px; }
.hg-big-title{ font-family:'Fraunces',serif; font-size:20px; font-weight:600; line-height:1.15; color:var(--paper); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
/* Minikalender */
.hg-month-tile .hg-content{ display:flex; flex-direction:column; }
.hg-mc-title{ font-size:12px; font-weight:700; color:var(--paper); margin-bottom:3px; text-transform:capitalize; }
.hg-mc-grid{ flex:1; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); grid-auto-rows:1fr; gap:1px; }
.hg-mc-wd{ font-size:9px; color:var(--muted); text-align:center; font-family:'IBM Plex Mono',monospace; }
.hg-mc-day{ border:none; background:none; color:var(--paper); font-size:11px; font-family:'Inter',sans-serif; padding:0; border-radius:6px; cursor:pointer; position:relative; min-height:0; }
.hg-mc-day.has::after{ content:''; position:absolute; left:50%; bottom:1px; width:3px; height:3px; margin-left:-1.5px; border-radius:50%; background:var(--accent); }
.hg-mc-day.today{ box-shadow:0 0 0 1.5px var(--accent) inset; font-weight:700; color:var(--accent); }
.hg-mc-day.hg-mc-green{ background:rgba(95,167,119,0.28); } .hg-mc-day.hg-mc-yellow{ background:rgba(224,185,77,0.28); } .hg-mc-day.hg-mc-red{ background:rgba(217,97,79,0.30); }
/* Veckans framsteg */
.hg-pr-row{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.hg-pr-num{ font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:var(--paper); line-height:1.1; }
.hg-pr-of{ font-size:14px; color:var(--muted); font-weight:600; }
.hg-pr-streak{ font-size:12px; font-weight:700; color:var(--accent); white-space:nowrap; }
.hg-pr-bar{ height:6px; border-radius:999px; background:var(--border); overflow:hidden; margin-top:5px; }
.hg-pr-bar i{ display:block; height:100%; background:var(--green); border-radius:999px; }
/* Schema idag */
.hg-sch-line{ display:flex; align-items:center; gap:6px; }
.hg-sch-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; display:block; }
.hg-sch-time{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); flex-shrink:0; }
.hg-sch-title{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Delat med dig */
.hg-shared-count{ color:var(--accent); font-size:15px; }
/* Snabbskapa */
.hg-quickadd .hg-content{ display:flex; align-items:center; }
.hg-qa{ display:flex; align-items:center; gap:6px; width:100%; margin:0; }
.hg-qa-input{ flex:1; min-width:0; height:40px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); padding:0 14px; font-size:14px; font-family:'Inter',sans-serif; }
.hg-qa-send{ flex-shrink:0; width:40px; height:40px; border-radius:50%; border:none; background:var(--accent); color:var(--on-accent, #1B2430); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.hg-qa-send svg{ width:18px; height:18px; }
/* Genvägar */
.hg-shortcuts .hg-content{ display:flex; align-items:stretch; }
.hg-sc{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:6px; width:100%; }
.hg-sc-btn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; min-width:0; border-radius:12px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); cursor:pointer; padding:4px 2px; font-family:'Inter',sans-serif; }
.hg-sc-ic{ display:flex; color:var(--accent); } .hg-sc-ic svg{ width:18px; height:18px; }
.hg-sc-lbl{ font-size:11px; font-weight:600; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hg-sc-opt.on{ border-color:var(--accent); background:var(--accent-soft); }
.hgpv-sc{ align-items:center; color:var(--accent); } .hgpv-sc svg{ width:18px; height:18px; }
/* Förhandsbilder för de nya korten */
.hgpv-month{ display:grid; grid-template-columns:repeat(7,1fr); gap:1.5px; }
.hgpv-month i{ display:block; height:5px; border-radius:1px; background:var(--border-strong); }
.hgpv-month i:nth-child(17){ background:var(--accent); }
.hgpv-bar{ display:block; height:4px; border-radius:2px; background:var(--border); overflow:hidden; }
.hgpv-bar i{ display:block; width:80%; height:100%; background:var(--green); }
.hgpv-sch{ display:flex; gap:3px; } .hgpv-sch i{ display:block; width:6px; height:6px; border-radius:50%; }
.hgpv-qa{ display:flex; align-items:center; gap:3px; } .hgpv-qa i{ flex:1; height:10px; border-radius:6px; border:1px solid var(--border-strong); display:block; } .hgpv-qa b{ width:10px; height:10px; border-radius:50%; background:var(--accent); display:block; }
.hgpv-scs{ display:grid; grid-template-columns:repeat(4,1fr); gap:2px; } .hgpv-scs i{ display:block; height:14px; border-radius:3px; border:1px solid var(--border-strong); }

/* ============================================================
   TRYCK-FEEDBACK — ingen blå systemruta (Androids WebView ritar annars en
   blå rektangel över allt man trycker på). Istället lyser det man trycker
   på upp en aning i mörka teman och blir en aning mörkare i ljust tema.
   ============================================================ */
*{ -webkit-tap-highlight-color: transparent; }
button:focus:not(:focus-visible), [role="button"]:focus:not(:focus-visible), a:focus:not(:focus-visible){ outline:none; }

button, a, [role="button"],
.reminder-row, .chore-row, .bd-page-row, .search-result-row, .hg-tile, .day-cell,
.tab-btn, .adv-option, .create-menu-item, .top-menu-item, .list-type-card, .hg-pick-card,
.shopping-item-row, .alarm-sound-row,
[data-edit], [data-edit-chore], [data-edit-note], [data-edit-countdown], [data-goto-date], [data-day], [data-hg-go], [data-hg-day]{
  transition: filter .12s ease, transform .12s ease;
}
button:active, a:active, [role="button"]:active,
.reminder-row:active, .chore-row:active, .bd-page-row:active, .search-result-row:active, .hg-tile:not(.hg-editing):active, .day-cell:active,
.tab-btn:active, .adv-option:active, .create-menu-item:active, .top-menu-item:active, .list-type-card:active, .hg-pick-card:active,
[data-edit]:active, [data-edit-chore]:active, [data-edit-note]:active, [data-edit-countdown]:active,
[data-goto-date]:active, [data-day]:active, [data-hg-go]:active, [data-hg-day]:active{
  filter: brightness(1.18);
}
body.light-theme button:active, body.light-theme a:active, body.light-theme [role="button"]:active,
body.light-theme .reminder-row:active, body.light-theme .chore-row:active, body.light-theme .bd-page-row:active, body.light-theme .search-result-row:active,
body.light-theme .hg-tile:not(.hg-editing):active, body.light-theme .day-cell:active, body.light-theme .tab-btn:active, body.light-theme .adv-option:active,
body.light-theme .create-menu-item:active, body.light-theme .top-menu-item:active, body.light-theme .list-type-card:active, body.light-theme .hg-pick-card:active,
body.light-theme [data-edit]:active, body.light-theme [data-edit-chore]:active, body.light-theme [data-edit-note]:active,
body.light-theme [data-edit-countdown]:active, body.light-theme [data-goto-date]:active, body.light-theme [data-day]:active,
body.light-theme [data-hg-go]:active, body.light-theme [data-hg-day]:active{
  filter: brightness(0.92);
}
/* Rader och kort "trycks in" en aning — känns som en knapp */
.reminder-row:active, .chore-row:active, .bd-page-row:active, .search-result-row:active, .hg-tile:not(.hg-editing):active,
.list-type-card:active, .hg-pick-card:active, .create-menu-item:active{ transform: scale(0.985); }
/* Inmatningsfält ska inte blinka */
input:active, textarea:active, select:active{ filter:none !important; transform:none !important; }
/* Månadsvis upprepning: "Den 5:e" / "Första måndagen" / "Sista måndagen" */
.monthly-mode-pills{ display:flex; flex-wrap:wrap; gap:6px; }
.monthly-mode-pill{ padding:8px 12px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper);
  font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; }
.monthly-mode-pill.active{ background:var(--accent); border-color:var(--accent); color:var(--on-accent, #1B2430); }
/* Ruta som bara stängs med Avbryt: liten skakning vid tryck utanför */
@keyframes modalNudge{ 0%,100%{ transform:translateX(0); } 25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); } }
.modal.modal-nudge{ animation: modalNudge .22s ease; }
/* Kategorier (Inställningar → Övrigt) */
.cat-list{ margin-top:10px; border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.cat-row{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-bottom:1px solid var(--border); min-height:24px; }
.cat-row:last-child{ border-bottom:none; }
.cat-dot{ width:8px; height:8px; border-radius:50%; background:var(--border-strong); flex-shrink:0; }
.cat-dot.own{ background:var(--accent); }
.cat-name{ flex:1; min-width:0; font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cat-note{ font-size:11.5px; flex-shrink:0; font-family:'IBM Plex Mono',monospace; }
.cat-icon{ font-size:15px; padding:2px 6px; flex-shrink:0; }
.cat-del{ color:var(--red); }
.cat-editing{ gap:6px; }
.cat-input{ flex:1; min-width:0; height:36px; border-radius:10px; border:1px solid var(--accent); background:var(--ink-bg-alt); color:var(--paper); padding:0 10px; font-size:14px; font-family:'Inter',sans-serif; }
.cat-btn{ flex:0 0 auto; padding:8px 12px; font-size:13px; }
.cat-builtin-tag{ font-family:'Inter',sans-serif; font-size:11px; padding:2px 7px; border-radius:999px; border:1px solid var(--border); }
/* Påminnelseformulär: "+ Sluttid" och "Flytande" på samma rad */
.form-inline-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-4px 0 12px; }
.float-wrap{ display:inline-flex; align-items:center; gap:8px; }
.float-check{ display:inline-flex; align-items:center; gap:7px; cursor:pointer; font-size:14px; font-weight:600; color:var(--paper); margin:0; text-transform:none; letter-spacing:0; font-family:'Inter',sans-serif; }
.float-check input{ width:18px; height:18px; accent-color:var(--accent); margin:0; }
.help-scope .settings-help-text{ display:none; }
.help-scope.help-open .settings-help-text{ display:block; }
.help-scope.help-open .settings-help-btn{ border-color:var(--accent); color:var(--accent); }

/* ============================================================
   "Spara i Arrenge" — det som delats från andra appar
   ============================================================ */
.share-preview{ border:1px solid var(--border-strong); border-radius:12px; padding:10px 12px; margin:6px 0 12px; background:var(--ink-bg-alt); }
.share-preview-title{ font-weight:700; font-size:14.5px; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.share-preview-url{ font-size:12px; color:var(--muted); margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-opts{ display:flex; flex-direction:column; gap:8px; }
.share-opt{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:14px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); cursor:pointer; text-align:left; font-family:'Inter',sans-serif; }
.share-opt.suggested{ border-color:var(--accent); background:var(--accent-soft); }
.share-opt-ic{ width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent-soft); color:var(--accent); flex-shrink:0; }
.share-opt-ic svg{ width:19px; height:19px; }
.share-opt-txt{ flex:1; min-width:0; display:flex; flex-direction:column; }
.share-opt-label{ font-size:15px; font-weight:700; }
.share-opt-sub{ font-size:12.5px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.share-opt-badge{ font-size:10.5px; font-weight:700; color:var(--accent); border:1px solid var(--accent); border-radius:999px; padding:2px 7px; flex-shrink:0; }
.share-items{ max-height:42vh; overflow-y:auto; border:1px solid var(--border); border-radius:12px; }
.share-item{ display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--border); cursor:pointer; font-size:14px; color:var(--muted); text-transform:none; letter-spacing:0; font-family:'Inter',sans-serif; margin:0; }
.share-item:last-child{ border-bottom:none; }
.share-item.on{ color:var(--paper); }
.share-item input{ width:18px; height:18px; accent-color:var(--accent); flex-shrink:0; margin:0; }
/* Flytta till idag / imorgon */
.move-row{ display:flex; gap:8px; margin:4px 0 6px; }
.move-row .move-btn{ flex:1; padding:10px 8px; font-size:13.5px; }
.past-move-btn{ padding:5px 12px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper);
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; }
.past-move-all{ display:flex; align-items:center; justify-content:flex-end; gap:6px; margin:0 2px 12px; font-size:13px; color:var(--muted); }

/* ============================================================
   Kom igång (Hem, nya användare)
   ============================================================ */
.onb-card{ border:1px solid var(--accent); background:linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--card); border-radius:18px; padding:14px 14px 10px; margin:0 0 14px; }
.onb-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.onb-title{ font-family:'Fraunces',serif; font-size:19px; font-weight:600; color:var(--paper); }
.onb-hide{ font-size:13px; color:var(--muted); }
.onb-sub{ font-size:13.5px; color:var(--muted); margin-top:6px; line-height:1.45; }
.onb-progress{ display:flex; align-items:center; gap:10px; margin:6px 0 10px; font-size:12px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.onb-bar{ flex:1; height:5px; border-radius:999px; background:var(--border); overflow:hidden; }
.onb-bar i{ display:block; height:100%; background:var(--green); border-radius:999px; transition:width .3s ease; }
.onb-steps{ display:flex; flex-direction:column; gap:6px; }
.onb-step{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); cursor:pointer; text-align:left; font-family:'Inter',sans-serif; }
.onb-step.done{ opacity:0.6; cursor:default; }
.onb-step.done .onb-label{ text-decoration:line-through; }
.onb-check{ width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border-strong); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; flex-shrink:0; }
.onb-step.done .onb-check{ background:var(--green); border-color:var(--green); color:#fff; }
.onb-ic{ display:flex; color:var(--accent); flex-shrink:0; } .onb-ic svg{ width:18px; height:18px; }
.onb-label{ flex:1; min-width:0; font-size:14px; font-weight:600; }
.onb-go{ color:var(--muted); font-size:18px; }
.hg-onb-row .onb-card{ margin:0; }
/* Flytta-knapparna inne i raden (Bortglömt) */
.row-move{ display:flex; align-items:center; gap:6px; margin-top:8px; flex-wrap:wrap; }
.row-move-label{ font-size:11.5px; color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.row-move-btn{ padding:4px 11px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--paper);
  font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; line-height:1.3; }
/* Kom igång: frivilliga steg */
.onb-extra{ margin-top:8px; border-top:1px solid var(--border); padding-top:6px; }
.onb-extra-toggle{ display:flex; align-items:center; justify-content:space-between; width:100%; background:none; border:none; color:var(--paper); padding:6px 2px; cursor:pointer; font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; }
.onb-extra-arrow{ color:var(--muted); transition:transform .2s ease; }
.onb-extra.open .onb-extra-arrow{ transform:rotate(180deg); }
.onb-extra .onb-steps{ margin-top:4px; }
/* "Dela med vänner": lägg till med e-post */
.share-email{ margin-top:10px; }
.share-email-row{ display:flex; gap:6px; margin-top:8px; }
.share-email-input{ flex:1; min-width:0; height:38px; border-radius:10px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); padding:0 10px; font-size:14px; font-family:'Inter',sans-serif; }
.share-email-btn{ flex:0 0 auto; padding:8px 12px; font-size:13px; }
.share-email-msg{ font-size:12.5px; margin-top:6px; line-height:1.4; }
.share-email-msg.ok{ color:var(--green); } .share-email-msg.err{ color:var(--red); } .share-email-msg.info{ color:var(--muted); }
.share-pending-chip{ display:inline-flex; align-items:center; gap:4px; padding:6px 6px 6px 12px; border-radius:999px; border:1px dashed var(--accent); font-size:13px; color:var(--paper); }
.share-pending-x{ border:none; background:none; color:var(--muted); cursor:pointer; font-size:12px; padding:2px 4px; }
.friend-request-shares{ font-size:12.5px; color:var(--accent); margin:2px 0 6px; }
.invite-greeting{ background:var(--accent-soft); border:1px solid var(--accent); border-radius:12px; padding:10px 12px; font-size:13.5px; line-height:1.45; margin:0 0 12px; color:var(--paper); }

/* ============================================================
   DATOR (mus/styrplatta): den VANLIGA layouten (nedre meny, en kolumn) —
   inte den liggande surfplatte-layouten — men lika bred som den, så
   hemskärmen och listorna får gott om plats. Den liggande layouten
   gäller bara pekskärmar (pointer:coarse), se media-frågorna ovan.
   ============================================================ */
@media (pointer:fine) and (min-width:900px){
  #app{ max-width:1150px; }
  /* max(): på skärmar smalare än 1150 px ligger knappen 20 px från kanten */
  .fab, .fab-mini{ right:max(20px, calc(50% - 575px + 20px)); }
  .fab-mini-panel{ right:max(12px, calc(50% - 575px + 12px)); }
  .fab-quick{ right:max(82px, calc(50% - 575px + 20px + 62px)); width:calc(520px - 40px - 62px); }
}
/* Inställningarnas flikar: ikon ovanför kort text */
.settings-tabs-icons{ gap:4px; }
.settings-tab.settings-tab-icon{ flex:1 1 0; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8px 0;
  font-size:clamp(10px, 2.9vw, 11px); letter-spacing:-0.1px; }
.settings-tab-icon svg{ width:18px; height:18px; flex-shrink:0; }
.settings-tab-icon span{ max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ============================================================
   Väderpåminnelser
   ============================================================ */
.weather-box{ border:1px solid var(--border); border-radius:14px; padding:10px 12px; margin:0 0 14px; }
.weather-grid{ display:flex; flex-direction:column; gap:8px; }
.weather-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.weather-select, .weather-num, .weather-time, .weather-place{ height:38px; border-radius:10px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); padding:0 8px; font-size:14px; font-family:'Inter',sans-serif; }
.weather-num{ width:68px; } .weather-time{ width:110px; } .weather-place{ flex:1; min-width:0; }
.weather-unit{ font-size:13px; color:var(--muted); }
.weather-search-btn{ flex:0 0 auto; padding:8px 12px; font-size:13px; }
.weather-results{ display:flex; flex-direction:column; border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.weather-result{ text-align:left; padding:9px 10px; background:var(--ink-bg-alt); border:none; border-bottom:1px solid var(--border); color:var(--paper); font-size:13.5px; cursor:pointer; font-family:'Inter',sans-serif; }
.weather-result:last-child{ border-bottom:none; }
.weather-summary{ font-size:13px; color:var(--accent); font-weight:600; }
.weather-credit{ font-size:11px; color:var(--muted); }
.weather-tag{ font-size:12px; color:var(--accent); margin-top:3px; }
.weather-tag.met{ color:var(--green); }
.weather-tag.inactive{ color:var(--muted); font-style:italic; }
.reminder-row:has(.weather-tag.inactive) .row-title, .reminder-row:has(.weather-tag.inactive) .title{ opacity:0.55; text-decoration:line-through; }
/* Ritade UI-ikoner (ersätter emoji) — följer textens färg och storlek */
.ui-ico{ width:1.05em; height:1.05em; vertical-align:-0.17em; flex-shrink:0; }
.adv-chip .ui-ico{ width:15px; height:15px; vertical-align:-2px; }
.preset-chip .ui-ico{ width:14px; height:14px; vertical-align:-2px; margin-right:2px; }
.imported-view-line .ui-ico{ color:var(--muted); margin-right:4px; }
.pending-sync-icon .ui-ico{ width:13px; height:13px; color:var(--muted); }

/* Helgdagar och flaggdagar */
.day-cell.holiday .num{ color:var(--red); font-weight:700; }
.day-cell .flag-mark{ position:absolute; bottom:4px; left:5px; color:var(--accent); line-height:0; }
.day-cell .flag-mark .ui-ico{ width:11px; height:11px; }
.day-special{ font-size:12.5px; color:var(--muted); margin:2px 0 4px; font-weight:600; }
.day-special.red{ color:var(--red); }
.day-special .ui-ico{ width:12px; height:12px; color:var(--accent); vertical-align:-1px; }
.day-special-sub{ font-weight:500; color:var(--muted); }
/* Namnsdagar */
.day-nameday{ font-size:12.5px; color:var(--muted); margin:2px 0 2px; }
.today-nameday{ font-size:12.5px; color:var(--muted); margin-top:6px; }
/* Röd dag på en färgad ruta (grön/gul/röd status): rött datum syns inte
   mot färgen — datumet behåller statusrutans mörka färg och får istället
   en mörk ring, så man både ser datumet och att det är en röd dag. */
.day-cell.holiday.status-green .num,
.day-cell.holiday.status-yellow .num,
.day-cell.holiday.status-red .num{
  color:#1B2430; font-weight:800;
  display:inline-flex; align-items:center; justify-content:center;
  min-width:1.7em; height:1.7em; padding:0 2px; box-sizing:border-box;
  border:2px solid #1B2430; border-radius:999px;
}
.day-cell.status-green .flag-mark, .day-cell.status-yellow .flag-mark, .day-cell.status-red .flag-mark{ color:#1B2430; }
.voice-beta-row{ display:flex; justify-content:center; margin:-4px 0 6px; }
.settings-label-row .beta-tag{ margin-left:2px; }
/* Röst: tillagda varor — nya rader tonas in, resten står stilla */
.voice-list-item{ padding:6px 10px; background:var(--card-raised); border-radius:8px; margin-bottom:4px; color:var(--paper); font-weight:600; }
.voice-list-item-new{ animation: voiceItemIn .25s ease-out; }
@keyframes voiceItemIn{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:none; } }
/* Sysslor: Startdatum + Till och med (valfritt) bredvid varandra */
.chore-date-range{ display:flex; gap:10px; align-items:flex-end; }
.chore-date-range .chore-date-col{ flex:1 1 0; min-width:0; display:flex; flex-direction:column; }
.chore-date-range .chore-date-col label{ white-space:normal; line-height:1.3; }
.chore-date-range input[type="date"]{ width:100%; min-width:0; box-sizing:border-box; }

/* "Lägg till på Hem" i liggande läge (surfplatta/mobil): bredare ruta,
   tre val per rad istället för två */
@media (orientation:landscape) and (min-width:700px) and (pointer:coarse),
       (orientation:landscape) and (max-height:500px) and (pointer:coarse){
  #homeGridPickerBox{ width:min(720px, calc(100vw - 48px)); max-width:none; }
  #homeGridPickerBox .hg-pick-grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
/* "Hela dagen" som en ruta i samma stil som fälten bredvid (datum, tid) */
/* "Hela dagen" ska få plats även med större systemtext: lite tajtare
   marginaler, något mindre text och en aning mindre knapp i rutan */


/* ============================================================
   Väder (Visa väder, väderrutan, flera orter)
   ============================================================ */
.day-weather{ display:inline-flex; align-items:center; gap:6px; margin:4px auto 2px; padding:5px 12px 5px 8px; border-radius:999px; border:1px solid var(--border); background:var(--ink-bg-alt); color:var(--paper); font-size:13px; font-family:'Inter',sans-serif; cursor:pointer; max-width:100%; flex-wrap:nowrap; justify-content:center; white-space:nowrap; }
.day-weather b{ font-size:14px; }
.day-weather .muted{ color:var(--muted); }
.wx-ico{ flex-shrink:0; }
.wx-now{ display:flex; align-items:center; gap:14px; margin:4px 0 10px; }
.wx-now-temp{ font-size:34px; font-weight:700; line-height:1; color:var(--paper); }
.wx-day-sum{ display:flex; align-items:flex-start; gap:6px; flex-wrap:nowrap; font-size:13.5px; color:var(--paper); padding:8px 10px; border-radius:10px; background:var(--card-raised); margin-bottom:10px; }
.wx-hours{ max-height:46vh; overflow-y:auto; border:1px solid var(--border); border-radius:12px; }
.wx-hour{ display:grid; grid-template-columns:34px 26px 46px 1fr 56px; align-items:center; gap:8px; padding:7px 10px; border-bottom:1px solid var(--border); font-size:13.5px; color:var(--paper); }
.wx-hour:last-child{ border-bottom:none; }
.wx-hour-t{ color:var(--muted); font-family:'IBM Plex Mono',monospace; }
.wx-hour-p{ color:#7FB9D8; font-size:12.5px; }
.wx-hour-w{ color:var(--muted); font-size:12.5px; text-align:right; }
.day-weather .day-weather-txt{ overflow:hidden; text-overflow:ellipsis; min-width:0; }
.wx-day-sum > span{ line-height:1.45; }
.wx-place-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:-4px 0 10px; }
.wx-place-name{ font-size:14px; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; font-weight:600; }
.wx-place-switch{ display:flex; gap:6px; overflow-x:auto; flex-shrink:1; scrollbar-width:none; }
.wx-place-switch::-webkit-scrollbar{ display:none; }
.wx-place-btn{ flex:0 0 auto; padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.wx-places{ display:flex; flex-direction:column; gap:6px; }
.wx-place-item{ display:flex; align-items:center; gap:6px; border:1px solid var(--border); border-radius:12px; background:var(--ink-bg-alt); }
.wx-place-item.active{ border-color:rgba(var(--accent-rgb),0.55); background:var(--accent-soft); }
.wx-place-pick{ flex:1; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:10px 12px; border:none; background:transparent; color:var(--paper); font-size:14px; font-weight:600; text-align:left; cursor:pointer; min-width:0; }
.wx-place-badge{ font-size:11px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:0.04em; }
.wx-place-remove{ width:36px; height:36px; border:none; background:transparent; color:var(--muted); font-size:12px; cursor:pointer; flex-shrink:0; }
.weather-tag.pending{ opacity:0.75; }

/* ============================================================
   Timer
   ============================================================ */
.timer-num::placeholder{ color:var(--muted); opacity:0.55; }
.timer-quick{ margin-top:26px; }
.timer-quick-head{ display:flex; align-items:center; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; }
.timer-quick-head .btn-link{ text-transform:none; letter-spacing:0; font-family:'Inter',sans-serif; font-size:13px; }
.timer-quick-head .btn-link[disabled]{ opacity:0.4; }
.timer-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.timer-chip-wrap{ position:relative; display:inline-flex; }
.timer-chip{ display:inline-flex; align-items:center; gap:7px; padding:10px 14px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); font-family:'Inter',sans-serif; font-size:14px; cursor:pointer; }
.timer-chip .ui-ico{ width:15px; height:15px; color:var(--accent); }
.timer-chip-dur{ font-weight:700; }
.timer-chip-label{ color:var(--muted); max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.timer-chip-wrap .timer-chip{ padding-right:30px; }
.timer-chip-x{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:24px; height:24px; border:none; border-radius:50%; background:transparent; color:var(--muted); font-size:11px; cursor:pointer; }
.timer-chip-wrap:not(:has(.timer-chip-x)) .timer-chip{ padding-right:14px; }
.hg-timer-chip{ display:inline-flex; align-items:center; gap:4px; justify-content:center; overflow:hidden; }
.hg-timer-star{ display:inline-flex; color:var(--accent); }
.hg-timer-star .ui-ico{ width:12px; height:12px; }

/* ============================================================
   Momentum (sidan och hemrutan)
   ============================================================ */
.mom-card{ background:var(--card); border:1px solid var(--border); border-radius:18px; padding:18px; margin-bottom:12px; }
.mom-hero{ text-align:center; padding:26px 18px 20px; }
.mom-big-ico{ width:44px; height:44px; color:var(--muted); }
.mom-hero.lit .mom-big-ico{ color:var(--accent); }
.mom-streak-lbl{ font-size:14px; color:var(--muted); margin-top:4px; }
.mom-status{ margin-top:14px; font-size:13.5px; color:var(--muted); display:inline-flex; align-items:center; gap:6px; }
.mom-status.ok{ color:var(--green); }
.mom-status.warn{ color:var(--accent); }
.mom-status .ui-ico{ width:15px; height:15px; }
.mom-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; }
.mom-stat{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 8px; text-align:center; display:flex; flex-direction:column; gap:3px; }
.mom-stat b{ font-family:'IBM Plex Mono',monospace; font-size:22px; color:var(--paper); }
.mom-stat span{ font-size:11.5px; color:var(--muted); line-height:1.25; }
.mom-grid-head{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; }
.mom-grid{ display:grid; grid-template-columns:auto repeat(7,1fr); gap:6px; align-items:center; }
.mom-wd{ text-align:center; font-size:11px; color:var(--muted); }
.mom-cell{ aspect-ratio:1; border-radius:6px; background:var(--ink-bg-alt); border:1px solid var(--border); }
.mom-cell.on{ background:var(--accent); border-color:var(--accent); }
.mom-cell.today{ outline:2px solid var(--paper); outline-offset:1px; }
.mom-cell.future{ opacity:0.3; }
.mom-locked{ text-align:center; }
.mom-locked h3{ margin:10px 0 6px; }
.mom-locked .onb-progress{ justify-content:center; }
.mom-hero-row{ display:flex; align-items:stretch; justify-content:center; gap:14px; }
.mom-hero-col{ flex:1; display:flex; flex-direction:column; align-items:center; min-width:0; }
.mom-hero-div{ width:1px; background:var(--border); }
.mom-mid-ico{ width:28px; height:28px; color:var(--muted); }
.mom-hero.lit .mom-flame{ color:var(--accent); }
.mom-hero-num{ font-family:'IBM Plex Mono',monospace; font-size:46px; font-weight:700; line-height:1.05; color:var(--paper); margin-top:6px; }
.mom-hero.lit .mom-streak-num{ color:var(--accent); }
.mom-hero .mom-streak-lbl{ text-align:center; line-height:1.3; }
.mom-section-head{ font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.06em; text-transform:uppercase; color:var(--muted); margin:22px 0 10px; }
.mom-share-title{ font-weight:700; color:var(--paper); font-size:15px; }
.mom-friends{ padding:6px 14px; }
.mom-friend{ display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--border); }
.mom-friend:last-child{ border-bottom:none; }
.mom-avatar{ width:36px; height:36px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; font-weight:700; flex-shrink:0; }
.mom-friend-body{ flex:1; min-width:0; }
.mom-friend-name{ font-weight:600; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mom-friend-meta{ font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:2px 10px; flex-wrap:wrap; }
.mom-friend-meta .ui-ico{ width:13px; height:13px; color:var(--accent); }
.mom-friend-meta b{ color:var(--paper); }
.mom-hi5{ flex-shrink:0; padding:8px 12px; font-size:13px; }
.mom-hi5.sent{ opacity:0.55; }
.mom-received{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:13.5px; font-weight:600; margin-bottom:10px; }
.mom-received .ui-ico{ width:16px; height:16px; }
.mom-footnote{ font-size:12px; color:var(--muted); margin-top:8px; line-height:1.5; }
.mom-friend-meta > span{ display:inline-flex; align-items:center; gap:4px; white-space:nowrap; }
.hg-mom-row{ display:flex; align-items:center; gap:10px; }
.hg-mom-ico{ width:30px; height:30px; color:var(--muted); flex-shrink:0; }
.hg-mom-ico.lit{ color:var(--accent); }
.hg-mom-main{ display:flex; flex-direction:column; min-width:0; }
.hg-mom-num{ font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:700; line-height:1; color:var(--paper); }
.hg-mom-num.lit{ color:var(--accent); }
.hg-mom-total{ margin-left:auto; text-align:right; display:flex; flex-direction:column; }
.hg-mom-total b{ font-family:'IBM Plex Mono',monospace; font-size:22px; color:var(--paper); line-height:1; }
.hg-mom-total span{ font-size:11.5px; color:var(--muted); }
.hg-mom-status{ margin-top:6px; }
.hg-mom-status.ok{ color:var(--green); }
.hg-mom-status.warn{ color:var(--accent); }
.hg-mom-week{ display:grid; grid-template-columns:repeat(7,1fr); gap:5px; margin-top:0; }
.hg-mom-week span{ height:10px; border-radius:4px; background:var(--ink-bg-alt); border:1px solid var(--border); }
.hg-mom-week span.on{ background:var(--accent); border-color:var(--accent); }
.hg-mom-week span.today{ outline:1.5px solid var(--paper); outline-offset:1px; }
.hg-mom-week span.future{ opacity:0.35; }
.hg-mom-week-wrap{ margin-top:auto; padding-top:12px; }
.hg-mom-week-head{ font-size:11px; color:var(--muted); margin-bottom:6px; }
.hg-mom-day{ display:flex; flex-direction:column; align-items:center; gap:4px; }
.hg-mom-day span{ display:block; width:100%; height:22px; border-radius:6px; background:var(--ink-bg-alt); border:1px solid var(--border); }
.hg-mom-day span.on{ background:var(--accent); border-color:var(--accent); }
.hg-mom-day span.today{ outline:1.5px solid var(--paper); outline-offset:1px; }
.hg-mom-day span.future{ opacity:0.35; }
.hg-mom-day i{ font-style:normal; font-size:10.5px; color:var(--muted); }
.hg-momentum{ display:flex; flex-direction:column; }
.mom-cell.rest{ background:transparent; border:2px dashed var(--accent); display:flex; align-items:center; justify-content:center; color:var(--accent); }
.mom-rest{ padding:14px 18px; }
.mom-rest-state{ font-size:12.5px; color:var(--accent); margin-top:8px; }
.mom-count{ float:right; color:var(--muted); letter-spacing:0; }
.mom-badges{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px 8px; padding:16px 12px; }
.mom-badge{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:4px; opacity:0.55; }
.mom-badge.got{ opacity:1; }
.mom-badge-face{ position:relative; width:58px; height:58px; border-radius:50%; border:2px solid var(--border-strong); background:var(--ink-bg-alt); display:flex; align-items:center; justify-content:center; color:var(--muted); }
.mom-badge-face b{ font-family:'IBM Plex Mono',monospace; font-size:17px; color:inherit; }
.mom-badge-face .ui-ico{ width:24px; height:24px; }
.mom-badge-flame{ position:absolute; top:-6px; right:-4px; width:20px; height:20px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; }
.mom-badge-flame .ui-ico{ width:14px; height:14px; }
.mom-badge.got .mom-badge-face{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.mom-badge-name{ font-size:12px; font-weight:600; color:var(--paper); line-height:1.25; }
.mom-badge-sub{ font-size:10.5px; color:var(--muted); line-height:1.2; }
.mom-wk{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); padding-right:4px; white-space:nowrap; }
.mom-wk.now{ color:var(--accent); font-weight:700; }
.mom-cell.rest .ui-ico{ width:62%; height:62%; }
.mom-pill{ position:fixed; left:50%; bottom:calc(96px + env(safe-area-inset-bottom, 0px)); transform:translate(-50%, 16px); opacity:0; z-index:9000; display:flex; align-items:center; gap:10px; padding:8px 16px 8px 8px; border-radius:999px; border:1px solid rgba(var(--accent-rgb),0.45); background:var(--card); color:var(--paper); box-shadow:0 8px 24px rgba(0,0,0,0.28); font-family:'Inter',sans-serif; cursor:pointer; transition:opacity .25s ease, transform .25s ease; max-width:calc(100vw - 32px); }
.mom-pill.in{ opacity:1; transform:translate(-50%, 0); }
.mom-pill-ico{ width:34px; height:34px; border-radius:50%; background:var(--accent-soft); color:var(--accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.mom-pill-ico .ui-ico{ width:18px; height:18px; }
.mom-pill-badge{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; border-radius:50%; border:2px solid var(--accent); box-sizing:border-box; font-family:'IBM Plex Mono',monospace; font-size:11px; }
.mom-pill-badge .ui-ico{ width:15px; height:15px; }
.mom-pill-txt{ display:flex; flex-direction:column; text-align:left; line-height:1.25; min-width:0; }
.mom-pill-txt b{ font-size:14px; }
.mom-pill-txt span{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ============================================================
   Kom ihåg (To-Do)
   ============================================================ */
.todo-add{ display:flex; gap:8px; margin:4px 0 14px; }
.todo-add input{ flex:1; min-width:0; }
.todo-add .btn{ flex:0 0 auto; padding:0 16px; }
.todo-row .rr-top{ padding-top:2px; gap:10px; }
.todo-when{ display:flex; flex-wrap:nowrap; align-items:center; gap:5px; margin-top:8px; min-width:0; }
.todo-day-btn{ flex:1 1 0; min-width:0; padding:7px 4px; border-radius:999px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); font-family:'Inter',sans-serif; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:center; }
.todo-day-btn.todo-day-pick{ flex:0 0 auto; padding:7px 10px; display:inline-flex; align-items:center; justify-content:center; }
.todo-day-btn.todo-day-pick .ui-ico{ width:15px; height:15px; }
.todo-day-btn:hover{ border-color:var(--accent); color:var(--accent); }
.hg-todo-row{ display:flex; align-items:baseline; gap:8px; }
.hg-todo-num{ font-family:'IBM Plex Mono',monospace; font-size:28px; font-weight:700; line-height:1; color:var(--paper); }
.hg-todo-list{ margin-top:10px; display:flex; flex-direction:column; gap:3px; }
.hg-todo-item{ font-size:12.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.todo-age{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--muted); white-space:nowrap; flex-shrink:0; margin-left:auto; }
.todo-row .todo-when{ margin-top:0; }
.todo-when.todo-when-few .todo-day-btn{ flex:0 0 auto; padding:7px 14px; }
.todo-when.todo-when-few .todo-day-btn.todo-day-pick{ padding:7px 12px; gap:5px; }
.todo-when-lbl{ font-size:12.5px; color:var(--muted); white-space:nowrap; flex-shrink:0; }
.todo-pick-txt{ white-space:nowrap; }

/* ============================================================
   Hemrutor: mätarkort, senaste, smala rutor
   ============================================================ */
.hg-wx{ display:flex; align-items:center; gap:10px; }
.hg-wx-temp{ font-size:26px; font-weight:700; line-height:1; color:var(--paper); }
.hg-wx-next{ display:flex; justify-content:space-between; gap:4px; margin-top:10px; padding-top:8px; border-top:1px solid var(--border); }
.hg-wx-h{ display:flex; flex-direction:column; align-items:center; gap:2px; font-size:12px; color:var(--muted); }
.hg-wx-h b{ color:var(--paper); font-size:13px; }
.home-big-btn.hg-upcoming-small{ font-size:12px; line-height:1.25; padding:6px 5px; white-space:normal; overflow-wrap:break-word; hyphens:manual; letter-spacing:-0.1px; }
.hg-forgotten-streak .hg-forgotten-ok{ color:var(--green); font-weight:600; }
.hg-ring-wrap{ display:flex; align-items:center; gap:14px; height:100%; }
.hg-ring-wrap.stacked{ flex-direction:column; justify-content:center; gap:8px; text-align:center; }
.hg-ring-bg{ fill:none; stroke:var(--ink-bg-alt); stroke-width:9; }
.hg-ring-fg{ fill:none; stroke:var(--accent); stroke-width:9; stroke-linecap:round; transition:stroke-dasharray .5s ease; }
.hg-ring.all .hg-ring-fg{ stroke:var(--accent); }
.hg-ring-num{ font-family:'IBM Plex Mono',monospace; font-size:22px; font-weight:700; fill:var(--paper); }
.hg-ring-check{ fill:none; stroke:var(--accent); stroke-width:8; stroke-linecap:round; stroke-linejoin:round; }
.hg-ring-date{ min-width:0; }
.hg-ring-wd{ font-size:13px; color:var(--muted); }
.hg-ring-day{ font-family:'Fraunces',Georgia,serif; font-size:26px; font-weight:600; color:var(--paper); line-height:1.1; }
.hg-ring-day span{ font-size:16px; font-weight:500; color:var(--muted); }
.hg-ring-ok{ color:var(--green); }
body.app-fullscreen main{ padding-top:calc(52px + env(safe-area-inset-top, 0px)); padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
.hg-tile .hg-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hg-tile .hg-line{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0; }
.hg-tile .hg-line .muted{ white-space:nowrap; }
.hg-tile .hg-sub{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hg-tile .hg-sch-time{ font-size:11.5px; white-space:nowrap; }
.hg-tile.hg-w1 .hg-sch-line{ flex-wrap:wrap; }
.hg-tile.hg-w1 .hg-sch-time{ font-size:11px; }
.hg-tile.hg-w1 .countdown-big .cd-big-num{ font-size:20px; }
.hg-tile.hg-w1 .countdown-big .cd-big-label{ font-size:9px; letter-spacing:0; }
.hg-tile.hg-w1 .countdown-big .cd-big-seg{ min-width:0; padding:6px 2px 5px; }
.hg-tile .countdown-big .cd-big-seg{ overflow:hidden; }
.hg-tile .countdown-big{ max-width:100%; overflow:hidden; }
.hg-tile.hg-w1 .hg-timer-chip{ min-width:0; padding-left:6px; padding-right:6px; }
.hg-tile.hg-w1 .hg-cd-title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hg-tile.hg-w1 .hg-title{ display:block; max-width:100%; }
.hg-tile.hg-w1 .hg-timer-presets{ flex-direction:column; align-items:stretch; }
.hg-tile.hg-w1 .hg-timer-presets .hg-timer-chip{ width:100%; }
.hg-tile.hg-w1 .hg-timer-presets .hg-timer-chip:nth-child(n+4){ display:none; }
.hg-tile.hg-w1 .hg-ring-day{ font-size:20px; }
.hg-tile.hg-w1 .hg-ring-day span{ font-size:12px; }
.hg-tile.hg-w1 .hg-ring-wd{ font-size:11px; }
.hg-tile.hg-w1 .hg-ring-date .hg-meta{ font-size:11px; white-space:normal; }

/* ============================================================
   Påminnelserader (rr2) och formuläret (När, Du redigerar tillfället)
   ============================================================ */
.reminder-row.rr2{ display:grid; grid-template-columns:5px auto minmax(0,1fr) auto; grid-template-areas:"bar top top chev" "bar check meta chev"; column-gap:10px; row-gap:6px; align-items:center; }
.reminder-row.rr2 > .status-bar{ grid-area:bar; align-self:stretch; }
.reminder-row.rr2 > .rr-top{ grid-area:top; display:flex; align-items:baseline; gap:8px; min-width:0; }
.reminder-row.rr2 > .rr-check{ grid-area:check; display:flex; align-items:center; justify-content:flex-start; }
.reminder-row.rr2 > .rr-meta{ grid-area:meta; min-width:0; }
.reminder-row.rr2 > .chevron{ grid-area:chev; align-self:center; }
.reminder-row.rr2 > .chore-done-btn{ grid-area:chev; align-self:center; }
.reminder-row.rr2 .rr-top .row-time-inline{ font-size:11.5px; }
.reminder-row.rr2 .rr-top .row-title{ font-size:15.5px; }
.reminder-row.rr2 .rr-meta .row-time{ margin-top:0; }
.reminder-row.rr2 .rr-check .check{ width:34px; height:34px; border-radius:9px; border:2px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--muted); }
.reminder-row.rr2 .rr-check .check svg{ width:18px; height:18px; opacity:0.28; }
.reminder-row.rr2 .rr-check .check:hover svg{ opacity:0.5; }
.reminder-row.rr2 .rr-check .check.done{ background:var(--green); border-color:var(--green); color:var(--ink-bg); }
.reminder-row.rr2 .rr-check .check.done svg{ opacity:1; }
.reminder-row.rr2 .rr-check .check.no-checkoff-icon{ background:transparent; border:none; }
.reminder-row.rr2 .rr-check .check.no-checkoff-icon svg{ opacity:0.85; width:20px; height:20px; }
.reminder-row.rr2 .rr-check .imported-cal-icon{ width:34px; height:34px; }
.reminder-row.rr2 .rr-check .imported-cal-icon svg{ width:20px; height:20px; }
.reminder-row.rr2 .rr-check .check:not(.done) svg polyline{ stroke:currentColor; }
.reminder-row.rr2 .rr-check .check:not(.done){ color:var(--paper); }
.when-field{ margin-bottom:12px; }
.when-seg{ display:flex; gap:4px; padding:4px; border-radius:14px; background:var(--ink-bg-alt); border:1px solid var(--border-strong); }
.when-opt{ flex:1 1 0; min-width:0; padding:9px 4px; border:none; border-radius:10px; background:transparent; color:var(--muted); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.when-opt.on{ background:var(--accent); color:var(--on-accent); }
.when-note{ margin:8px 0 0; }
.when-hidden{ visibility:hidden; pointer-events:none; }
.edit-occurrence{ display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:9px 12px; border-radius:12px; background:var(--accent-soft); color:var(--accent); font-size:13px; line-height:1.4; }
.edit-occurrence .ui-ico{ width:15px; height:15px; flex-shrink:0; margin-top:1px; }
.edit-occurrence b{ color:var(--paper); }
.mic-denied{ margin-top:4px; }

/* ============================================================
   Helskärm: dagsvy, listor, anteckningar, hela appen
   ============================================================ */
.day-fs-btn{ position:absolute; right:0; top:8px; z-index:2; display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--paper); font-size:12px; font-weight:600; white-space:nowrap; cursor:pointer; }
.day-fs-btn .ui-ico{ width:13px; height:13px; }
body.day-fullscreen header.top, body.day-fullscreen nav.tabs, body.day-fullscreen .fab, body.day-fullscreen .fab-mini, body.day-fullscreen .fab-mini-panel, body.day-fullscreen .fab-quick, body.day-fullscreen #fabMiniBackdrop, body.day-fullscreen .alert-banner, body.day-fullscreen .status-banner, body.day-fullscreen .onboarding-hint{ display:none !important; }
.dayfs-bar{ position:sticky; top:env(safe-area-inset-top, 0px); z-index:5; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 0 12px; background:var(--ink-bg); }
.dayfs-date{ font-size:14px; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dayfs-today{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent); font-size:11.5px; }
.dayfs-back{ position:static; display:inline-flex; align-items:center; padding:6px 14px; border-radius:999px; border:none; background:var(--accent); color:var(--on-accent); font-size:12px; font-weight:600; cursor:pointer; flex-shrink:0; }
body.day-fullscreen main{ padding-bottom:calc(24px + env(safe-area-inset-bottom, 0px)) !important; }
.day-fs-btn.list-fs-btn{ position:static; flex-shrink:0; margin-top:2px; }
body.app-fullscreen header.top, body.app-fullscreen nav.tabs, body.app-fullscreen .alert-banner, body.app-fullscreen .status-banner, body.app-fullscreen .onboarding-hint{ display:none !important; }
body.app-fullscreen.day-fullscreen main{ padding-top:0; }
.app-fs-exit{ position:fixed; top:calc(10px + env(safe-area-inset-top, 0px)); right:12px; z-index:120; display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:999px; border:1px solid var(--border-strong); background:var(--card); color:var(--paper); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; box-shadow:var(--shadow); }
.app-fs-exit .ui-ico{ width:14px; height:14px; }

/* ============================================================
   Dagsvyns rubrik
   ============================================================ */
.day-header-year{ font-size:0.62em; color:var(--muted); font-weight:500; letter-spacing:0.01em; }

/* ============================================================
   Tangentbordet uppe
   ============================================================ */
body.keyboard-open nav.tabs, body.keyboard-open .fab, body.keyboard-open .fab-mini, body.keyboard-open .app-fs-exit{ display:none !important; }
body.keyboard-open main{ padding-bottom:16px !important; }

/* ============================================================
   Inställningar: skapa-menyns ordning, schema-hjälp, menyn uppe till höger
   ============================================================ */
.create-order{ display:flex; flex-direction:column; gap:6px; }
.create-order-row{ display:flex; align-items:center; gap:10px; padding:8px 10px; border:1px solid var(--border); border-radius:12px; background:var(--ink-bg-alt); transition:border-color .15s; }
.create-order-label{ flex:1; min-width:0; font-size:14px; font-weight:600; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.create-order.editing .create-order-row{ border-color:var(--border-strong); background:var(--card-raised); cursor:grab; }
.create-order .list-item-drag-handle{ flex-shrink:0; color:var(--muted); font-size:17px; cursor:grab; padding:0 2px; }
.top-menu-dropdown{ right:12px; }

/* ============================================================
   Övrigt
   ============================================================ */
.btn.mom-hi5{ width:auto; min-width:0; flex:0 0 auto; }

/* ============================================================
   Media (liggande läge, små skärmar, rörelse)
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .mom-pill{ transition:none; }
}
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
  .back-row.day-fs-btn{ left:auto; right:62px; top:10px; background:transparent; color:var(--paper); border:1px solid var(--border-strong); padding:8px 14px; }
  .day-fs-btn.list-fs-btn{ position:static; right:auto; left:auto; }
  body.app-fullscreen main{ margin-left:0 !important; }
  #appFullscreenBtn{ display:none !important; }
  .day-header-year{ font-size:0.7em; }
}
@media (max-width:360px){
  .app-fs-exit span{ display:none; }
  .app-fs-exit{ padding:8px 9px; }
  .todo-pick-txt{ display:none; }
  .todo-when.todo-when-few .todo-day-btn.todo-day-pick{ padding:7px 10px; }
  .hg-tile.hg-w2 .countdown-big .cd-big-num{ font-size:20px; }
  .hg-tile.hg-w2 .countdown-big .cd-big-label{ font-size:9px; letter-spacing:0; }
  .hg-tile.hg-w2 .countdown-big .cd-big-seg{ min-width:0; padding:6px 2px 5px; }
  .hg-tile.hg-w2 .countdown-big .cd-big-seg:nth-child(4){ display:none; }
}

/* ============================================================
   KOMMENTARER OCH SNABBSVAR (Inställningar → Funktioner, okt 2026)
   ============================================================ */
.cm-section{margin-top:16px;border-top:1px solid var(--border);padding-top:14px;}
.cm-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.cm-head label{font-family:'IBM Plex Mono',monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0;}
.cm-new{font-size:11px;color:var(--accent);font-weight:600;}
.cm-list{max-height:min(320px, 45vh);overflow-y:auto;overscroll-behavior:contain;}
.cm-empty{font-size:13px;color:var(--muted);margin-bottom:10px;line-height:1.4;}
.cm{display:flex;gap:10px;margin-bottom:12px;}
.cm.pending{opacity:.6;}
.cm-av{flex:0 0 30px;height:30px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-weight:700;color:#1B2430;}
.cm-body{flex:1;min-width:0;}
.cm-meta{font-size:11.5px;color:var(--muted);margin-bottom:3px;}
.cm-meta b{color:var(--paper);font-weight:600;margin-right:6px;}
.cm-del{background:none;border:none;padding:0;color:var(--muted);font-size:11.5px;text-decoration:underline;cursor:pointer;font-family:inherit;}
.cm-text{background:var(--card-raised);border:1px solid var(--border);border-radius:4px 12px 12px 12px;padding:8px 11px;font-size:14px;color:var(--paper);line-height:1.4;display:inline-block;max-width:100%;white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;}
.cm.me{flex-direction:row-reverse;}
.cm.me .cm-body{text-align:right;}
.cm.me .cm-text{background:var(--accent-soft);border-color:var(--accent);border-radius:12px 4px 12px 12px;}
.cm-input{display:flex;gap:8px;align-items:center;margin-top:6px;}
.cm-input input{flex:1;min-width:0;}
.cm-send{flex:0 0 40px;height:40px;border-radius:50%;border:none;background:var(--accent);color:var(--on-accent);display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;}
.cm-send svg{width:18px;height:18px;}

/* Håll inne på en vara → snabbsvar. Ingen textmarkering/systemmeny vid långt tryck. */
body.qr-on .shopping-list-view .shopping-item-row{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;}
.list-flag-menu{margin-top:-4px;padding:8px 10px 10px;border:1.5px solid var(--accent);border-top:none;border-radius:0 0 9px 9px;background:var(--card);}
.list-flag-menu .qr-label{font-size:12.5px;color:var(--muted);margin:0 0 8px 2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.list-flag-menu .qr-label b{color:var(--paper);font-weight:600;}
.shopping-item-row.flag-target{border:1.5px solid var(--accent);border-bottom-color:transparent;border-radius:9px 9px 0 0;background:var(--accent-soft);position:relative;z-index:1;}
.shopping-list-view.flag-picking .shopping-item-row:not(.flag-target){opacity:.4;}
.qr-row{display:flex;flex-wrap:wrap;gap:6px;}
.qr-chip{padding:7px 12px;border-radius:999px;border:1px solid var(--border-strong);background:transparent;color:var(--paper);font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;}
.qr-chip.sel{background:var(--accent-soft);border-color:var(--accent);color:var(--accent);}
.qr-chip.qr-cancel{color:var(--muted);border-color:var(--border);}
.list-item-flag{display:inline-block;margin-left:4px;padding:1px 8px;border-radius:999px;border:1px solid var(--border-strong);font-size:11px;color:var(--muted);white-space:nowrap;vertical-align:1px;}
.list-item-flag.flag-notfound{border-color:var(--red);color:var(--red);}

.report-quote{border-left:3px solid var(--border-strong);padding:6px 10px;margin:0 0 12px;color:var(--paper);font-size:14px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere;max-height:30vh;overflow-y:auto;background:var(--ink-bg-alt);border-radius:0 8px 8px 0;}

/* ============================================================
   MINIMALISTISKT LÄGE (Inställningar → Funktioner, Beta, okt 2026)
   Ersätter Hem-sidans innehåll med en av fyra stilar. Bara appens egna
   färgvariabler används, så alla teman (mörkt, ljust, lila) fungerar.
   ============================================================ */
.min-home{ padding:14px 8px 8px; display:flex; flex-direction:column; color:var(--paper); }
.min-sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.min-empty{ color:var(--muted); font-size:15px; padding:14px 0; }
.min-date-head{ display:flex; flex-direction:column; gap:2px; margin:6px 0 26px; }
.min-date-wd{ font-size:14px; font-weight:500; color:var(--muted); }
.min-date-big{ margin:0; font-family:'Inter',sans-serif; font-size:36px; font-weight:700; letter-spacing:-0.02em; line-height:1.05; color:var(--paper); }
.min-section-label{ margin:30px 0 4px; font-size:12px; font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--muted); }
.min-quiet-link{ align-self:flex-start; margin-top:22px; padding:10px 0; border:none; background:none; color:var(--muted); font-family:inherit; font-size:14px; cursor:pointer; }
.min-quiet-link:hover{ color:var(--paper); }

/* Rader + bock (vanlig = hel ring, flytande = streckad, klar = fylld) */
.min-list{ display:flex; flex-direction:column; }
.min-row{ display:flex; align-items:center; gap:14px; min-height:56px; padding:8px 2px; border-bottom:1px solid var(--border); cursor:pointer; }
.min-row:last-child{ border-bottom:none; }
.min-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.min-row-title{ font-size:16.5px; font-weight:500; line-height:1.3; overflow-wrap:anywhere; }
.min-row-meta{ font-size:13px; color:var(--muted); }
.min-row-time, .min-row-right{ flex-shrink:0; font-size:14px; color:var(--muted); }
.min-since{ color:var(--accent); font-weight:600; font-size:13px; }
.min-row.is-done .min-row-title, .min-w-line.is-done .min-w-title, .min-tl-item.is-done .min-tl-title{ text-decoration:line-through; color:var(--muted); }
.min-check{
  flex-shrink:0; width:26px; height:26px; padding:0; border-radius:50%;
  border:2px solid var(--paper); background:transparent; color:var(--on-accent);
  display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  position:relative;
}
/* Större tryckyta än själva ringen */
.min-check::after{ content:''; position:absolute; inset:-9px; }
.min-check svg{ width:14px; height:14px; opacity:0; }
.min-check.is-floating{ border-style:dashed; border-color:var(--accent); }
.min-check.is-done{ background:var(--accent); border-color:var(--accent); border-style:solid; }
.min-check.is-done svg{ opacity:1; }
.min-check-none{ border-color:transparent; cursor:default; }
.min-check-none::after{ display:none; }

/* ---- 2. Tidslinje ---- */
.min-tl-head{ display:flex; align-items:center; justify-content:space-between; margin:4px 2px 14px; }
.min-tl-month{ margin:0; font-family:'Inter',sans-serif; font-size:26px; font-weight:700; letter-spacing:-0.01em; }
.min-tl-nav{ display:flex; align-items:center; gap:2px; }
.min-tl-week{ font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--muted); min-width:44px; text-align:center; }
.min-icon-btn{ width:44px; height:44px; border:none; border-radius:50%; background:transparent; color:var(--paper); font-size:24px; line-height:1; cursor:pointer; }
.min-icon-btn:hover{ background:var(--card); }
.min-wk{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; }
.min-wk-day{ border:none; background:transparent; padding:9px 0; border-radius:14px; display:flex; flex-direction:column; align-items:center; gap:6px; color:var(--muted); font-family:inherit; cursor:pointer; }
.min-wk-wd{ font-size:12px; }
.min-wk-num{ font-size:16px; font-weight:600; color:var(--paper); }
.min-wk-day.is-today .min-wk-num{ color:var(--accent); }
.min-wk-day.is-sel{ background:var(--accent); color:var(--on-accent); }
.min-wk-day.is-sel .min-wk-num{ color:var(--on-accent); }
.min-tl-today{ margin-top:6px; padding:6px 2px; }
.min-tl-untimed{ margin-top:18px; padding:6px 14px; border-radius:16px; background:var(--card); border:1px solid var(--border); }
.min-tl-untimed-label{ padding-top:8px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.min-tl-untimed .min-row{ min-height:50px; }
.min-tl{ margin-top:16px; display:flex; flex-direction:column; }
.min-tl-row{ display:flex; gap:12px; min-height:42px; border-top:1px solid var(--border); }
.min-tl-hour{ width:30px; flex-shrink:0; padding-top:5px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.min-tl-slot{ flex:1; min-width:0; position:relative; display:flex; flex-direction:column; gap:4px; padding:4px 0; }
.min-tl-item{ display:flex; align-items:center; gap:10px; min-height:40px; padding:4px 12px 4px 8px; border-radius:10px; background:var(--accent-soft); cursor:pointer; position:relative; z-index:1; }
.min-tl-item .min-check{ width:22px; height:22px; }
.min-tl-item .min-check svg{ width:12px; height:12px; }
.min-tl-title{ flex:1; min-width:0; font-size:14.5px; font-weight:500; overflow-wrap:anywhere; }
.min-tl-time{ flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--muted); }
.min-tl-now{ position:absolute; left:-6px; right:0; height:2px; background:var(--accent); z-index:2; pointer-events:none; }
.min-tl-now::before{ content:''; position:absolute; left:-4px; top:-4px; width:10px; height:10px; border-radius:50%; background:var(--accent); }

/* ---- 3. Skriv och klart ---- */
.min-w-wrap{ display:flex; flex-direction:column; min-height:calc(100vh - 190px); }
.min-w-date{ font-size:14px; color:var(--muted); margin:8px 2px 0; }
.min-w-group{ margin-top:28px; display:flex; flex-direction:column; }
.min-w-label{ font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.min-w-label-accent{ color:var(--accent); }
.min-w-line{ display:flex; align-items:center; gap:12px; min-height:48px; cursor:pointer; }
.min-w-title{ flex:1; min-width:0; font-size:20px; font-weight:500; line-height:1.25; overflow-wrap:anywhere; }
.min-w-group-today .min-w-title{ font-size:23px; }
.min-w-right{ flex-shrink:0; font-size:13.5px; color:var(--muted); max-width:45%; text-align:right; }
.min-w-form{
  position:sticky; bottom:92px; z-index:5; margin-top:auto;
  display:flex; align-items:center; gap:6px;
  padding:6px 6px 6px 18px; border-radius:20px;
  background:var(--card-raised); border:1px solid var(--border-strong); box-shadow:var(--shadow);
}
.min-w-wrap .min-quiet-link{ margin-bottom:18px; }
.min-w-form input.min-w-input{ flex:1; min-width:0; width:auto; height:46px; margin:0; padding:0; border:none; border-radius:0; background:transparent; box-shadow:none; color:var(--paper); font-family:inherit; font-size:16px; outline:none; }
.min-w-input::placeholder{ color:var(--muted); }
.min-w-btn{ width:46px; height:46px; flex-shrink:0; border:none; border-radius:15px; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; cursor:pointer; }
.min-w-btn svg{ width:20px; height:20px; }
.min-w-btn-quiet{ background:transparent; color:var(--paper); }
.min-w-form:focus-within{ border-color:var(--accent); }
body.keyboard-open .min-w-form, body.app-fullscreen .min-w-form{ bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }

/* ---- 4. Fyra rutor ---- */
.min-tiles-head{ display:flex; flex-direction:column; gap:2px; margin:6px 2px 20px; }
.min-next{ display:flex; flex-direction:column; gap:8px; padding:20px 22px; border-radius:24px; background:var(--accent); color:var(--on-accent); cursor:pointer; }
.min-next-label{ font-size:12px; font-weight:700; letter-spacing:0.07em; text-transform:uppercase; opacity:0.8; }
.min-next-title{ font-size:23px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; }
.min-next-sub{ font-size:14px; opacity:0.85; }
.min-next-empty{ cursor:default; background:var(--card); color:var(--paper); border:1px solid var(--border); }
.min-tiles{ margin-top:12px; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px; }
.min-tile{ min-height:146px; box-sizing:border-box; padding:18px; border-radius:22px; background:var(--card); border:1px solid var(--border); display:flex; flex-direction:column; justify-content:space-between; gap:10px; cursor:pointer; }
.min-tile:hover, .min-row:hover, .min-w-line:hover{ filter:brightness(1.04); }
.min-tile-title{ font-size:15px; font-weight:600; }
.min-tile-body{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.min-tile-num{ font-size:40px; font-weight:700; line-height:1; letter-spacing:-0.02em; }
.min-tile-big{ font-size:18px; font-weight:600; line-height:1.2; overflow-wrap:anywhere; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.min-tile-sub{ font-size:13px; color:var(--muted); overflow-wrap:anywhere; }

/* Synligt fokus för tangentbord */
.min-home [role="button"]:focus-visible, .min-home button:focus-visible, .min-style-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* Stilväljaren i Inställningar → Funktioner */
.min-style-picker{ margin-top:12px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:8px; }
.min-style-opt{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 4px 8px; border-radius:14px; cursor:pointer;
  border:1px solid var(--border-strong); background:transparent; color:var(--muted);
  font-family:inherit; font-size:12.5px; font-weight:600;
}
.min-style-opt svg{ width:40px; height:32px; }
.min-style-opt.is-sel{ border-color:var(--accent); background:var(--accent-soft); color:var(--paper); }
.min-style-opt.is-sel svg{ color:var(--accent); }

/* Liggande läge: flikraden ligger till vänster — skrivfältet kan ligga
   längst ner, och rutorna får fyra i bredd */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
  .min-w-form{ bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .min-w-wrap{ min-height:calc(100vh - 110px); }
  .min-tiles{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
  .min-tile{ min-height:120px; }
}

/* ============================================================
   INTERAKTIV GUIDE "Anpassa Arrenge" (okt 2026)
   Eget lager ovanför allt annat. Fyra mörka block runt målet blockerar
   resten av skärmen — själva målet går att trycka på.
   ============================================================ */
.tour-layer{ position:fixed; inset:0; z-index:1000; pointer-events:none; }
.tour-layer.tour-paused{ display:none; }
.tour-block{ position:fixed; background:rgba(8,11,16,0.66); pointer-events:auto; transition:all 0.18s ease; }
.tour-ring{ position:fixed; border-radius:16px; border:2px solid var(--accent); box-shadow:0 0 0 4px rgba(var(--accent-rgb),0.25); pointer-events:none; transition:all 0.18s ease; animation:tourPulse 1.8s ease-in-out infinite; }
@keyframes tourPulse{ 0%,100%{ box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.22); } 50%{ box-shadow:0 0 0 9px rgba(var(--accent-rgb),0.10); } }
@media (prefers-reduced-motion:reduce){ .tour-ring{ animation:none; } .tour-block, .tour-ring{ transition:none; } }
.tour-card{
  position:fixed; pointer-events:auto; box-sizing:border-box;
  padding:18px 18px 14px; border-radius:20px;
  background:var(--card-raised); color:var(--paper);
  border:1px solid var(--border-strong); box-shadow:var(--shadow);
  font-family:'Inter',sans-serif;
}
.tour-count{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--accent); margin-bottom:6px; }
.tour-title{ margin:0 0 6px; font-family:'Fraunces',serif; font-size:21px; font-weight:600; line-height:1.2; }
.tour-text{ margin:0; font-size:14.5px; line-height:1.5; color:var(--paper); }
.tour-hint{ margin-top:8px; font-size:12.5px; color:var(--muted); }
.tour-btns{ margin-top:14px; display:flex; align-items:center; gap:8px; }
.tour-btns-gap{ flex:1; }
.tour-btn{ min-height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--border-strong); background:transparent; color:var(--paper); font-family:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.tour-btn-quiet{ border-color:transparent; color:var(--muted); padding:0 6px; }
.tour-btn-primary{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.tour-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* "Anpassa · Guide" under rutnätet på Hem */
.hg-customize-row{ display:flex; align-items:center; justify-content:center; gap:2px; margin-top:10px; }
.hg-customize-row .hg-customize-link{ display:inline-block; margin:0; }
.hg-customize-sep{ color:var(--muted); font-size:12.5px; }
.hg-guide-link{ margin-top:4px; }
/* Låga skärmar (liggande telefon): kompaktare guidekort */
@media (max-height:500px){
  .tour-card{ padding:12px 14px 10px; }
  .tour-title{ font-size:17px; margin-bottom:4px; }
  .tour-text{ font-size:13.5px; line-height:1.4; }
  .tour-hint{ display:none; }
  .tour-btns{ margin-top:10px; }
  .tour-btn{ min-height:40px; }
}

/* Kom ihåg / Todo: frågetecken bredvid rubriken som visar förklaringen */
.todo-header{ display:flex; align-items:center; gap:10px; }
.todo-header h2{ margin-right:0; }
.todo-help-text{ margin:-4px 0 12px; }
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
  .todo-header{ justify-content:center; }
}

/* ============================================================
   iPHONE (html.platform-ios, sätts av app.js bara i iOS-appen)
   Appen ritas ända ut i kanterna (viewport-fit=cover), så marginaler
   för statusraden/Dynamic Island upptill och hemindikatorn nertill
   läggs till här. Android och webben påverkas inte.
   ============================================================ */
html.platform-ios{
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
  /* hur mycket högre bottenmenyn blir än vanligt (hemindikatorn) */
  --sab-extra: max(0px, calc(var(--sab) - 10px));
  -webkit-text-size-adjust: 100%;
}
html.platform-ios body{ -webkit-tap-highlight-color: transparent; }
/* En fast remsa bakom klockan/batteriet, så att innehåll man scrollar
   inte syns under statusraden. Under modalerna (.overlay = 40). */
html.platform-ios body::before{
  content:''; position:fixed; top:0; left:0; right:0; height:var(--sat);
  background:var(--ink-bg); z-index:39; pointer-events:none;
}
html.platform-ios header.top{ padding-top: calc(10px + var(--sat)); }
html.platform-ios .top-menu-dropdown{ top: calc(54px + var(--sat)); }
html.platform-ios nav.tabs{ padding-bottom: calc(18px + var(--sab-extra)); }
html.platform-ios .fab,
html.platform-ios .fab-mini,
html.platform-ios .fab-quick{ bottom: calc(88px + var(--sab-extra)); }
html.platform-ios .fab-mini-panel{ bottom: calc(158px + var(--sab-extra)); }
html.platform-ios .modal{ padding-bottom: calc(26px + var(--sab)); max-height: calc(88vh - var(--sat)); }
html.platform-ios #app{ padding-bottom: calc(86px + var(--sab-extra)); }
/* Liggande läge: sidopanelen och innehållet hålls undan från kameran/notchen */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
  html.platform-ios header.top{ padding-top: calc(8px + var(--sat)); left: var(--sal); }
  html.platform-ios nav.tabs{ left: var(--sal); padding-bottom: var(--sab-extra); }
  html.platform-ios #app{ padding-left: calc(52px + var(--sal)); padding-right: var(--sar); padding-bottom: var(--sab); }
  html.platform-ios .fab,
  html.platform-ios .fab-mini{ right: calc(16px + var(--sar)); bottom: calc(16px + var(--sab)); }
  html.platform-ios .fab-quick{ right: calc(78px + var(--sar)); bottom: calc(16px + var(--sab)); }
  html.platform-ios .fab-mini-panel{ right: calc(8px + var(--sar)); bottom: calc(86px + var(--sab)); }
  html.platform-ios .top-menu-dropdown{ top: calc(8px + var(--sat)); left: calc(56px + var(--sal)); }
}

/* Minimalistiskt läge och guiden på iPhone */
html.platform-ios .min-w-form{ bottom: calc(92px + var(--sab-extra)); }
html.platform-ios body.keyboard-open .min-w-form, html.platform-ios body.app-fullscreen .min-w-form{ bottom: calc(10px + var(--sab)); }
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
  html.platform-ios .min-w-form{ bottom: calc(10px + var(--sab)); }
}

/* "Visa mig hur"-kortet högst upp på Hem (visas en gång per användare) */
.tour-intro-card{ position:relative; display:flex; gap:10px; border:1px solid var(--accent); background:linear-gradient(180deg, var(--accent-soft), transparent 75%), var(--card); border-radius:18px; padding:14px 14px 12px; margin:0 0 14px; }
.tour-intro-body{ flex:1; min-width:0; }
.tour-intro-title{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--paper); padding-right:28px; }
.tour-intro-text{ font-size:13.5px; color:var(--muted); margin-top:4px; line-height:1.45; }
.tour-intro-actions{ display:flex; align-items:center; gap:8px; margin-top:10px; flex-wrap:wrap; }
.tour-intro-close{ position:absolute; top:6px; right:6px; width:36px; height:36px; border:none; background:none; color:var(--muted); font-size:15px; cursor:pointer; border-radius:10px; }
.tour-intro-close:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* "Ladda ner"-knappar till höger om nedre menyn — bara webbversionen
   (renderas aldrig i appen) och bara på breda skärmar där de får plats.
   Ligger absolut-positionerade intill menyn, så menyn står kvar i mitten.
   Aldrig i liggande läge på pekskärm (där är menyn en smal sidopanel). */
.web-store-badges{ display:none; }
@media (min-width:900px) and (pointer:fine), (min-width:900px) and (orientation:portrait){
  .tabs-inner{ position:relative; }
  .web-store-badges{ display:flex; gap:8px; position:absolute; left:calc(100% + 16px); top:50%; transform:translateY(-50%); }
}
.web-store-badge{ display:flex; align-items:center; gap:9px; height:46px; padding:0 14px 0 11px; border-radius:12px; background:var(--card-raised); border:1px solid var(--border-strong); color:var(--paper); text-decoration:none; box-shadow:var(--shadow); white-space:nowrap; transition:border-color .15s ease, transform .15s ease; }
.web-store-badge:hover{ border-color:var(--accent); transform:translateY(-1px); }
.web-store-badge:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
.web-store-badge-icon{ display:flex; color:var(--accent); }
.web-store-badge-text{ display:flex; flex-direction:column; line-height:1.1; }
.web-store-badge-small{ font-size:10.5px; color:var(--muted); font-weight:500; }
.web-store-badge-big{ font-size:14.5px; font-weight:700; letter-spacing:0.1px; }

/* ============================================================
   MATLISTA (okt 2026)
   ============================================================ */
.sr-only{ position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ml-set-label{ font-size:12.5px; color:var(--muted); margin-top:12px; }
.ml-chip-row{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; }
.ml-chip{ display:inline-flex; align-items:center; gap:5px; min-height:36px; padding:0 13px; border-radius:999px; border:1px solid var(--border-strong); background:transparent; color:var(--muted); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; }
.ml-chip .ui-ico{ width:13px; height:13px; }
.ml-chip.on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); }
.ml-tabs{ margin-bottom:12px; }
.ml-meal-tabs{ margin:0 0 12px; }
.ml-share-row{ display:flex; align-items:center; gap:10px; padding:7px 8px 7px 10px; margin-bottom:12px; border-radius:12px; background:var(--ink-bg-alt); border:1px solid var(--border); min-height:46px; box-sizing:border-box; }
.ml-avas{ display:flex; flex-shrink:0; }
.ml-avas .ml-ava + .ml-ava{ margin-left:-6px; }
.ml-ava{ width:24px; height:24px; border-radius:50%; color:#10161E; font-size:10.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--ink-bg-alt); flex-shrink:0; box-sizing:border-box; }
.ml-ava.big{ width:30px; height:30px; font-size:12px; border-width:0; }
.ml-share-txt{ flex:1; min-width:0; font-size:13px; color:var(--muted); line-height:1.35; }
.ml-share-txt b{ color:var(--paper); font-weight:600; }
.ml-share-btn{ flex-shrink:0; height:34px; padding:0 12px; border-radius:9px; border:1px solid var(--border-strong); background:transparent; color:var(--paper); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; }
.ml-plan-select{ width:100%; margin:-4px 0 12px; background:var(--ink-bg-alt); border:1px solid var(--border-strong); border-radius:10px; padding:9px 12px; color:var(--paper); font-family:'Inter',sans-serif; font-size:13.5px; }
.ml-weeknav{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; }
.ml-weeknav-c{ text-align:center; flex:1; }
.ml-weeknav-t{ font-size:15px; font-weight:700; color:var(--paper); }
.ml-weeknav-s{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--muted); margin-top:2px; }
.ml-thisweek{ display:block; margin:-4px auto 10px; font-size:12.5px; }
.ml-rows{ display:flex; flex-direction:column; gap:7px; }
.ml-row{ display:flex; align-items:center; gap:12px; min-height:58px; padding:8px 12px; border-radius:14px; box-sizing:border-box; background:var(--card); border:1px solid var(--border); }
.ml-row.filled{ cursor:pointer; }
.ml-row.empty{ background:transparent; border:1px dashed var(--border-strong); }
.ml-row.empty[data-meal-choose]{ cursor:pointer; }
.ml-row.past{ background:transparent; border-color:transparent; opacity:0.55; min-height:44px; }
.ml-day{ width:42px; flex-shrink:0; }
.ml-day-wd{ display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.5px; color:var(--muted); }
.ml-day-n{ display:block; font-size:19px; font-weight:700; line-height:1.1; color:var(--paper); }
.ml-day.today .ml-day-wd, .ml-day.today .ml-day-n{ color:var(--accent); }
.ml-row-main{ flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:2px; }
.ml-row-title{ font-size:15px; font-weight:600; color:var(--paper); line-height:1.3; word-break:break-word; }
.ml-row-sub{ font-size:12px; color:var(--muted); line-height:1.35; }
.ml-scope{ display:inline-flex; align-items:center; gap:4px; margin-top:3px; padding:2px 8px; border-radius:999px; background:var(--accent-soft); border:1px solid rgba(var(--accent-rgb),0.35); color:var(--accent); font-size:11px; font-weight:600; }
.ml-scope .ui-ico{ width:11px; height:11px; }
.ml-scope-quiet{ background:transparent; border-color:var(--border-strong); color:var(--muted); }
.ml-sugg-label{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.4px; text-transform:uppercase; color:var(--accent); }
.ml-sugg-line{ display:flex; align-items:baseline; gap:6px; flex-wrap:wrap; }
.ml-sugg-btns{ display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.ml-mini{ display:inline-flex; align-items:center; gap:5px; height:34px; padding:0 12px; border-radius:10px; border:1px solid var(--border-strong); background:transparent; color:var(--paper); font-family:'Inter',sans-serif; font-size:12.5px; font-weight:600; cursor:pointer; flex-shrink:0; }
.ml-mini .ui-ico{ width:13px; height:13px; }
.ml-mini.primary{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent); font-weight:700; }
.ml-mini.quiet{ border-color:transparent; color:var(--muted); padding:0 6px; }
.ml-mini:disabled{ opacity:0.5; }
.ml-add-link{ color:var(--accent); font-size:14px; font-weight:600; }
.ml-week-actions{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-top:12px; }
.ml-week-actions .btn{ padding:11px 8px; font-size:13px; }
.ml-add{ display:flex; gap:8px; margin:0 0 4px; }
.ml-add input{ flex:1; min-width:0; height:48px; box-sizing:border-box; padding:0 14px; border-radius:12px; border:1px solid var(--border-strong); background:var(--ink-bg-alt); color:var(--paper); font-family:'Inter',sans-serif; font-size:15px; }
.ml-add input:focus{ outline:none; border-color:var(--accent); }
.ml-add-btn{ width:48px; height:48px; border-radius:12px; border:none; background:var(--accent); color:var(--on-accent); display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; }
.ml-add-btn svg{ width:20px; height:20px; }
.ml-add-btn:disabled{ background:var(--card); border:1px solid var(--border-strong); color:var(--muted); cursor:default; }
.ml-filter{ margin:8px 0 10px; }
.ml-dish{ display:flex; align-items:center; gap:12px; padding:12px 12px 12px 14px; border-radius:14px; background:var(--card); border:1px solid var(--border); cursor:pointer; }
.ml-dish.new{ border-color:var(--accent); background:linear-gradient(180deg, var(--accent-soft), transparent 90%), var(--card); }
.ml-dish-name{ font-size:15px; font-weight:600; color:var(--paper); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ml-new-tag{ margin:0; }
.ml-dish-meta{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:2px; font-size:12px; color:var(--muted); }
.ml-tag{ padding:2px 7px; border-radius:999px; background:var(--ink-bg-alt); font-size:11px; }
.ml-planned{ flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:11.5px; padding:6px 9px; border-radius:10px; background:var(--green-soft); color:var(--green); }
/* Dagsvyn */
.ml-daycard{ background:var(--green-soft) !important; border-color:rgba(95,167,119,0.45) !important; align-items:center; justify-content:flex-start !important; gap:12px !important; }
.ml-daycard-ic{ display:flex; color:var(--green); flex-shrink:0; }
.ml-daycard-ic .ui-ico{ width:20px; height:20px; }
.ml-daycard-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
.ml-daycard-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; min-width:0; }
.ml-daycard-k{ width:62px; flex-shrink:0; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.08em; text-transform:uppercase; color:var(--green); }
.ml-daycard-v{ font-size:14px; font-weight:500; color:var(--paper); min-width:0; word-break:break-word; }
.ml-daycard-s{ font-size:12px; color:var(--muted); }
.ml-daycard-sep{ height:1px; background:rgba(95,167,119,0.3); }
.ml-daycard-tomorrow{ font-size:12px; color:var(--muted); }
/* Hemrutor */
.hg-tile.hg-meal{ background:linear-gradient(180deg, var(--green-soft), transparent 85%), var(--card); border-color:rgba(95,167,119,0.45); }
.hg-tile.hg-meal-empty{ border-style:dashed; }
.hg-ml-head{ display:flex; align-items:center; gap:6px; color:var(--green); font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.05em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-ml-head .ui-ico{ width:14px; height:14px; flex-shrink:0; }
.hg-ml-head span{ overflow:hidden; text-overflow:ellipsis; }
.hg-ml-line{ display:flex; flex-direction:column; margin-top:5px; min-width:0; }
.hg-ml-k{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-ml-k.hg-ml-green{ color:var(--green); }
.hg-ml-v{ font-size:13.5px; font-weight:600; color:var(--paper); line-height:1.25; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hg-ml-big{ font-family:'Fraunces',serif; font-size:18px; font-weight:600; color:var(--paper); line-height:1.15; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; margin-top:2px; }
.hg-ml-v2{ font-size:13.5px; font-weight:600; color:var(--paper); line-height:1.25; margin-top:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hg-tile.hg-meal-open .hg-ml-v2{ color:var(--muted); font-weight:500; font-style:italic; }
.hg-ml-sugg{ display:flex; flex-direction:column; margin-top:4px; min-width:0; }
.hg-ml-sugg .hg-ml-k{ color:var(--accent); }
.hg-ml-btns{ display:flex; gap:6px; margin-top:auto; padding-top:6px; }
.hg-ml-btns .ml-mini{ height:32px; padding:0 10px; }
.hg-ml-weekhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; font-size:13px; font-weight:700; color:var(--paper); margin-bottom:4px; }
.hg-ml-week{ display:flex; flex-direction:column; flex:1; justify-content:space-evenly; min-height:0; }
.hg-ml-week.cols{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); column-gap:14px; align-content:space-evenly; }
.hg-ml-wrow{ display:flex; align-items:baseline; gap:8px; min-width:0; padding:2px 0; }
.hg-ml-wd{ width:36px; flex-shrink:0; font-size:11px; font-weight:700; text-transform:uppercase; color:var(--muted); }
.hg-ml-wd.today{ color:var(--green); }
.hg-ml-wv{ flex:1; min-width:0; font-size:13px; font-weight:600; color:var(--paper); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hg-ml-wv.open{ color:var(--muted); font-weight:500; font-style:italic; }
.hgpv-ic.hgpv-green{ color:var(--green); }
.hgpv-ml-k{ font-family:'IBM Plex Mono',monospace; font-size:7.5px; color:var(--green); }
.hgpv-ml-week{ display:flex; flex-direction:column; gap:3px; width:100%; }
.hgpv-ml-week i{ display:block; height:3px; border-radius:2px; background:var(--green); }
.hgpv-ml-week i.open{ width:50%; background:var(--border-strong); }
.hgpv-ml-add{ display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:var(--accent); font-size:18px; font-weight:700; }
/* Paneler */
.ml-modal-eyebrow{ font-size:12px; color:var(--muted); font-weight:600; margin-bottom:2px; }
.ml-modal-head h3{ margin-bottom:10px; }
.ml-pick-weekhead{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; font-size:13px; color:var(--paper); }
.ml-icon-btn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--border-strong); background:transparent; color:var(--paper); font-size:18px; line-height:1; cursor:pointer; }
.ml-icon-btn:disabled{ opacity:0.35; cursor:default; }
.ml-cells{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:5px; }
.ml-cell{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:8px 2px 6px; border-radius:12px; box-sizing:border-box; min-width:0; font-family:'Inter',sans-serif; cursor:pointer; background:transparent; color:var(--paper); border:1px dashed var(--border-strong); }
.ml-cell.busy{ background:var(--ink-bg-alt); color:var(--muted); border:1px solid var(--border-strong); }
.ml-cell.picked{ background:var(--accent); color:var(--on-accent); border:1px solid var(--accent); }
.ml-cell.past{ opacity:0.35; cursor:default; }
.ml-cell-wd{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.4px; }
.ml-cell-n{ font-size:17px; font-weight:700; line-height:1.1; }
.ml-cell-dish{ font-size:9.5px; line-height:1.15; min-height:22px; max-width:100%; text-align:center; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; }
.ml-legend{ display:flex; gap:14px; flex-wrap:wrap; margin-top:8px; font-size:11.5px; color:var(--muted); }
.ml-legend span{ display:inline-flex; align-items:center; gap:5px; }
.ml-lg{ width:9px; height:9px; border-radius:3px; display:inline-block; }
.ml-lg.picked{ background:var(--accent); }
.ml-lg.busy{ background:var(--ink-bg-alt); border:1px solid var(--border-strong); }
.ml-section-label{ font-size:13px; font-weight:700; color:var(--paper); margin:14px 0 8px; }
.ml-opts{ display:flex; flex-direction:column; background:var(--ink-bg-alt); border-radius:14px; padding:2px 14px; margin-top:12px; }
.ml-section-label + .ml-opts{ margin-top:0; }
.ml-opt{ display:flex; align-items:center; gap:12px; min-height:46px; cursor:pointer; color:var(--paper); }
.ml-opt + .ml-opt{ border-top:1px solid var(--border); }
.ml-opt input[type=radio]{ width:18px; height:18px; margin:0; accent-color:var(--accent); flex-shrink:0; }
.ml-opt-t{ flex:1; font-size:14px; font-weight:600; }
.ml-opt-s{ font-size:12.5px; color:var(--muted); text-align:right; max-width:50%; }
.ml-opt-link{ border:none; background:none; color:var(--accent); font-family:'Inter',sans-serif; font-size:13px; font-weight:600; cursor:pointer; padding:6px 0; text-align:right; max-width:55%; }
.ml-time{ background:var(--card); border:1px solid var(--border-strong); border-radius:9px; color:var(--accent); font-family:'IBM Plex Mono',monospace; font-size:13px; padding:5px 8px; }
.ml-friends{ display:flex; flex-direction:column; background:var(--ink-bg-alt); border-radius:14px; padding:2px 14px; max-height:50vh; overflow:auto; }
.ml-friend{ display:flex; align-items:center; gap:12px; min-height:54px; cursor:pointer; }
.ml-friend + .ml-friend{ border-top:1px solid var(--border); }
.ml-friend input{ width:20px; height:20px; margin:0; accent-color:var(--accent); flex-shrink:0; }
.ml-friend-main{ flex:1; min-width:0; }
.ml-friend-name{ display:block; font-size:14.5px; font-weight:600; color:var(--paper); }
.ml-friend-note{ display:block; font-size:12px; color:var(--muted); margin-top:1px; }
.ml-choose-list{ max-height:42vh; overflow:auto; }
.ml-choose-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ml-choose-new, .ml-choose-sugg{ margin-bottom:8px; gap:10px; }
.ml-choose-sugg{ border-color:rgba(var(--accent-rgb),0.45) !important; }
.ml-entry-title{ word-break:break-word; }
.ml-fill-rows{ display:flex; flex-direction:column; gap:8px; }
.ml-fill-row{ display:flex; align-items:center; gap:12px; padding:10px 10px 10px 12px; border-radius:14px; background:var(--ink-bg-alt); border:1px solid var(--border); }
.ml-swap{ display:flex; flex-direction:column; gap:8px; margin:0 0 14px; }
.ml-swap-row{ display:flex; align-items:flex-start; gap:12px; padding:10px 12px; border-radius:10px; background:var(--ink-bg-alt); border:1px solid var(--border-strong); }
.ml-swap-row.ml-swap-new{ border-color:var(--green); }
.ml-swap-k{ width:44px; flex-shrink:0; padding-top:2px; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600; color:var(--muted); }
.ml-swap-new .ml-swap-k{ color:var(--green); }
.ml-swap-v{ flex:1; min-width:0; font-size:14.5px; line-height:1.35; color:var(--paper); display:flex; flex-direction:column; gap:3px; word-break:break-word; }
.ml-swap-v .muted{ font-size:11.5px; }
.ml-strike{ color:var(--muted); text-decoration:line-through; }
.voice-multi-time.ml-voice-meal{ display:inline-flex; align-items:center; gap:5px; color:var(--green); }
.voice-multi-time.ml-voice-meal .ui-ico{ width:14px; height:14px; }
/* Lappen ovanför snabbfältet */
.hg-qa{ position:relative; }
.qa-preview{ position:absolute; left:0; bottom:calc(100% + 8px); z-index:5; max-width:calc(100% + 40px); display:inline-flex; align-items:center; gap:7px; padding:6px 12px 6px 10px; border-radius:999px; font-family:'Inter',sans-serif; font-size:12.5px; color:var(--paper); background:var(--card-raised); border:1px solid var(--border-strong); box-shadow:0 8px 20px rgba(0,0,0,0.3); cursor:default; text-align:left; animation:qaIn .15s ease-out; }
.qa-preview.editable{ cursor:pointer; }
@keyframes qaIn{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.qa-preview-ic{ display:flex; flex-shrink:0; }
.qa-preview-ic svg{ width:14px; height:14px; }
.qa-preview-txt{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.qa-preview-txt b{ font-weight:600; }
.qa-preview-edit{ flex-shrink:0; font-size:11.5px; font-weight:700; color:var(--accent); margin-left:2px; }
.qa-preview.qa-accent{ background:linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card-raised); border-color:rgba(var(--accent-rgb),0.45); } .qa-preview.qa-accent .qa-preview-ic{ color:var(--accent); }
.qa-preview.qa-green{ background:linear-gradient(var(--green-soft), var(--green-soft)), var(--card-raised); border-color:rgba(95,167,119,0.5); } .qa-preview.qa-green .qa-preview-ic{ color:var(--green); }
.qa-preview.qa-mint{ background:linear-gradient(rgba(143,201,160,0.16), rgba(143,201,160,0.16)), var(--card-raised); border-color:rgba(143,201,160,0.45); } .qa-preview.qa-mint .qa-preview-ic{ color:#8FC9A0; }
.qa-preview.qa-purple{ background:linear-gradient(rgba(201,160,220,0.16), rgba(201,160,220,0.16)), var(--card-raised); border-color:rgba(201,160,220,0.45); } .qa-preview.qa-purple .qa-preview-ic{ color:#C9A0DC; }
.qa-preview.qa-pink{ background:linear-gradient(rgba(232,160,191,0.16), rgba(232,160,191,0.16)), var(--card-raised); border-color:rgba(232,160,191,0.45); } .qa-preview.qa-pink .qa-preview-ic{ color:#E8A0BF; }
.qa-preview.qa-beige{ background:linear-gradient(rgba(214,196,160,0.16), rgba(214,196,160,0.16)), var(--card-raised); border-color:rgba(214,196,160,0.45); } .qa-preview.qa-beige .qa-preview-ic{ color:#D6C4A0; }
.qa-preview.qa-muted .qa-preview-ic{ color:var(--muted); }
/* Snabbskapa-rutan på Hem: lappen ligger ovanför rutan (rutan klipper inte) */
.hg-tile.hg-quickadd{ overflow:visible; z-index:3; }

body.qa-typing .onboarding-hint{ display:none !important; }

/* Avslutad syssla i "Alla sysslor" (okt 2026) */
.status-bar.ended{ background:var(--muted); opacity:.45; }
.chore-row-ended .chore-row-title{ opacity:.7; }

/* SKAPA-MENYN: "Vanligast" + "Mer" (okt 2026) */
.create-menu-group-label{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:2px 2px 8px; }
.create-menu-more + .modal-actions{ margin-top:14px !important; }
.create-menu-item-top + .create-menu-group-label{ margin-top:6px; }
.create-menu-more{ display:flex; flex-wrap:wrap; gap:8px; }
.create-menu-pill{ flex:0 0 auto !important; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; width:auto; margin:0; padding:10px 14px; border-radius:999px; font-size:13.5px; }
.create-menu-pill .create-menu-item-swatch{ width:9px; height:9px; }
.create-menu-badge{ flex:0 0 auto; align-self:center; font-size:10.5px; font-weight:600; color:var(--muted); border:1px solid var(--border-strong); border-radius:999px; padding:1px 7px; white-space:nowrap; }
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
  .create-menu-group-label, .create-menu-more{ flex:1 0 100%; }
  #createMenuBox .create-menu-item-top{ flex:1 0 calc(33.33% - 6px) !important; }
}

/* SCHEMA SOM GÄST: exempel i stället för stopp (okt 2026) */
.sg-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0 2px 10px; }
.sg-head h2{ margin:0; }
.sg-tag{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); border:1px solid var(--border-strong); border-radius:999px; padding:3px 9px; }
.sg-wrap{ border:1px solid var(--border); border-radius:16px; background:var(--card); overflow:hidden; padding:8px 0; margin-bottom:14px; }
.sg-grid{ position:relative; height:386px; opacity:.6; }
.sg-hour{ position:absolute; left:10px; font-size:11px; color:var(--muted); }
.sg-line{ position:absolute; left:52px; right:0; border-top:1px solid var(--border); }
.sg-block{ position:absolute; left:58px; right:10px; border-radius:10px; padding:6px 10px; box-sizing:border-box; color:#151922; font-size:12.5px; overflow:hidden; display:flex; flex-direction:column; }
.sg-block b{ font-weight:700; } .sg-block span{ font-size:11px; opacity:.75; }
.sg-block.c1{ background:#D8A34A; } .sg-block.c2{ background:#7FB9D8; } .sg-block.c3{ background:#C99FD8; } .sg-block.c4{ background:#8FCB9F; }

/* "Vill du att telefonen säger till?" efter första saken med tid (okt 2026) */
.notif-ask-card{ position:fixed; left:14px; right:14px; bottom:calc(150px + env(safe-area-inset-bottom, 0px)); z-index:250; max-width:520px; margin:0 auto; border-color:var(--accent) !important; box-shadow:0 14px 34px rgba(0,0,0,.45); animation:qaIn .2s ease-out; }
.notif-ask-row{ display:flex; gap:10px; align-items:flex-start; }
.notif-ask-row > svg{ width:20px; height:20px; color:var(--accent); flex:0 0 auto; margin-top:2px; }
.notif-ask-title{ font-weight:700; color:var(--paper); font-size:15px; }
.notif-ask-text{ font-size:12.5px; color:var(--muted); margin-top:3px; }
.notif-ask-actions{ display:flex; gap:8px; margin-top:12px; }
.notif-ask-actions .btn-secondary{ flex:1; } .notif-ask-actions .btn-primary{ flex:2; }

.sg-cta{ margin-bottom:96px; }

/* INTRO: "Vad vill du använda Arrenge till?" (okt 2026) */
.intro-interests{ display:flex; flex-direction:column; align-items:center; width:100%; max-width:400px; margin:0 auto; padding:0 18px; box-sizing:border-box; }
.intro-int-title{ font-size:22px !important; text-align:center; margin-bottom:10px; text-wrap:balance; }
.intro-int-desc{ font-size:14px; line-height:1.5; text-align:center; margin-bottom:18px; max-width:340px; }
.intro-int-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px; width:100%; }
.intro-int{ display:flex; align-items:center; gap:9px; min-height:52px; padding:8px 10px 8px 12px; border-radius:14px; border:1px solid var(--border-strong); background:var(--card); color:var(--muted); font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; text-align:left; cursor:pointer; transition:border-color .15s, background .15s, color .15s; }
.intro-int-ic{ display:inline-flex; flex:0 0 auto; }
.intro-int-ic svg{ width:18px; height:18px; }
.intro-int-label{ flex:1; min-width:0; line-height:1.25; }
.intro-int-check{ flex:0 0 auto; width:20px; height:20px; border-radius:50%; border:1.5px solid var(--border-strong); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; }
.intro-int.on{ border-color:var(--accent); background:linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); color:var(--paper); }
.intro-int.on .intro-int-ic{ color:var(--accent); }
.intro-int.on .intro-int-check{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* NEDRÄKNING: dagen är här / efter dagen (okt 2026) */
.hg-tile.hg-cd-celebrate{ position:relative; overflow:hidden; border-color:var(--accent) !important;
  background:radial-gradient(120% 90% at 50% 70%, rgba(var(--accent-rgb), .30), transparent 70%), var(--card) !important;
  box-shadow:0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 26px rgba(var(--accent-rgb), .28); animation:cdGlow 2.8s ease-in-out infinite; }
@keyframes cdGlow{ 0%,100%{ box-shadow:0 0 0 1px rgba(var(--accent-rgb), .35), 0 0 18px rgba(var(--accent-rgb), .20); } 50%{ box-shadow:0 0 0 1px rgba(var(--accent-rgb), .55), 0 0 32px rgba(var(--accent-rgb), .40); } }
@media (prefers-reduced-motion: reduce){ .hg-tile.hg-cd-celebrate{ animation:none; } }
.hg-cd-party{ text-align:center; font-family:'Fraunces', Georgia, serif; font-weight:700; color:var(--accent); font-size:26px; line-height:1.15; margin:8px 0 4px; text-wrap:balance; }
.hg-cd-party.tiny{ font-size:16px; margin:2px 0; }
.hg-cd-confetti{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2; }
.hg-cd-ago{ text-align:center; font-size:20px; font-weight:700; color:var(--paper); margin:8px 0 2px; }
.hg-cd-ago.tiny{ font-size:14px; margin:2px 0; }
.hg-tile.hg-cd-old .hg-content{ opacity:.6; }
.hg-cd-after{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-top:8px; }
.hg-cd-btn{ border:1px solid var(--accent); background:var(--accent-soft); color:var(--accent); border-radius:999px; padding:6px 11px; font-family:'Inter',sans-serif; font-size:12px; font-weight:600; cursor:pointer; }
.hg-cd-btn.ghost{ border-color:var(--border-strong); background:transparent; color:var(--muted); }
.cd-celebrate-view{ text-align:center; padding:16px 0 6px; }
.cd-celebrate-big{ font-family:'Fraunces', Georgia, serif; font-weight:700; color:var(--accent); font-size:30px; line-height:1.15; margin-bottom:8px; }

/* "Notisen ligger kvar" i formulären (okt 2026, Android) */
.persist-row{ display:flex; align-items:center; gap:12px; margin-top:12px; padding:10px 12px; border:1px solid var(--border); border-radius:12px; background:var(--ink-bg-alt); }
.persist-text{ flex:1; min-width:0; }
.persist-title{ font-size:14px; font-weight:600; color:var(--paper); }
.persist-sub{ font-size:12px; color:var(--muted); margin-top:2px; line-height:1.4; }
.persist-row .switch{ flex:0 0 auto; }
.persist-row .switch.disabled{ opacity:.4; pointer-events:none; }

/* ---- Välkomstsidan (första starten) ---- */
.logged-out-gate.welcome{ position:fixed; inset:0; z-index:200; background:var(--ink-bg); overflow-y:auto; display:block; padding:0; }
.welcome-inner{ position:relative; max-width:420px; margin:0 auto; padding:calc(40px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px)); box-sizing:border-box; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; min-height:100%; }
.welcome-ask-row{ width:100%; margin:4px 0 22px; }
.welcome-ask{ margin:0; font-family:'Fraunces',Georgia,serif; color:var(--paper); font-size:23px; font-weight:700; text-align:center; text-wrap:balance; line-height:1.45; }
.welcome-ask-logo{ display:inline-block; height:1.12em; vertical-align:-0.27em; margin:0 .08em; }
.welcome-ask-logo svg{ height:100%; width:auto; }
.welcome-ask-end{ white-space:nowrap; }
.welcome-ask .welcome-q{ vertical-align:-0.08em; margin-left:2px; font-size:13px; }
.welcome-list{ width:100%; display:flex; flex-direction:column; gap:7px; }
.welcome-row{ display:flex; align-items:center; gap:4px; min-height:48px; padding:0 8px 0 0; border-radius:14px; border:1px solid var(--border-strong); background:var(--card); color:var(--muted); transition:border-color .15s, background .15s, color .15s; }
.welcome-row.on{ border-color:var(--accent); background:linear-gradient(var(--accent-soft), var(--accent-soft)), var(--card); color:var(--paper); }
.welcome-pick{ flex:1; min-width:0; display:flex; align-items:center; gap:11px; align-self:stretch; padding:0 6px 0 14px; background:none; border:none; color:inherit; font-family:'Inter',sans-serif; font-size:14.5px; font-weight:600; text-align:left; cursor:pointer; }
.welcome-row.on .intro-int-ic{ color:var(--accent); }
.welcome-label{ flex:1; min-width:0; }
.welcome-q{ flex:0 0 auto; width:30px; height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; border:none; background:none; color:var(--muted); font-family:'Inter',sans-serif; font-size:13px; font-weight:800; cursor:pointer; position:relative; }
.welcome-q::before{ content:''; position:absolute; inset:5px; border-radius:50%; border:1.5px solid var(--border-strong); }
.welcome-q.open{ color:var(--accent); }
.welcome-q.open::before{ border-color:var(--accent); }
.welcome-check{ flex:0 0 auto; width:22px; height:22px; margin-left:2px; padding:0; border-radius:50%; border:1.5px solid var(--border-strong); background:none; color:var(--ink-bg); display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; cursor:pointer; }
.welcome-row.on .welcome-check{ background:var(--accent); border-color:var(--accent); }
.welcome-actions{ width:100%; padding-top:26px; display:flex; flex-direction:column; gap:6px; }
.welcome-act-row{ display:flex; align-items:center; gap:6px; }
.welcome-act-row .btn-primary{ flex:1; min-width:0; }
.welcome-guest-row{ justify-content:center; padding-left:36px; }
.welcome-guest-row .btn-link{ padding-top:10px; padding-bottom:10px; }
.welcome-guest-row .btn-link{ text-align:center; }
.welcome-pop{ position:absolute; left:18px; right:18px; z-index:5; padding:12px 14px; border-radius:14px; background:var(--card-raised); border:1px solid var(--border-strong); box-shadow:0 12px 32px rgba(0,0,0,.4); color:var(--paper); text-align:left; }
.welcome-pop::before{ content:''; position:absolute; left:calc(var(--arrow-x, 50%) - 18px - 7px); width:12px; height:12px; background:var(--card-raised); border:1px solid var(--border-strong); transform:rotate(45deg); }
.welcome-pop.below::before{ top:-7px; border-right:none; border-bottom:none; }
.welcome-pop.above::before{ bottom:-7px; border-left:none; border-top:none; }
.welcome-pop-title{ font-weight:700; font-size:14px; margin-bottom:4px; }
.welcome-pop-text{ color:var(--muted); font-size:13.5px; line-height:1.5; }

/* ============================================================
   NYA FORMULÄR (okt 2026): påminnelse, syssla och listor.
   Ark nerifrån med fast fot (Avbryt/Spara), skrollande mitt, kort med
   fast höjd och egna sidor i samma ark. Följer appens färger, så mörkt,
   ljust och lila tema fungerar av sig själva.
   ============================================================ */
.fs-sheet{
  --fs-field: var(--ink-bg-alt);
  --fs-gold-text: var(--accent);
  --fs-sub: var(--muted);
  --fs-line: var(--border);
  --fs-line2: var(--border-strong);
}
body.light-theme .fs-sheet{ --fs-gold-text:#8A5E22; --fs-sub:#5C5243; --fs-field:#EFE7D8; --card:#FBF8F2; --ink-bg:#F5EFE6; }
body.light-theme .fs-share.on{ background:#FBF6EC; }
.fs-share-row:has(.fs-others) .fs-fchip{ padding:0 12px; }
.modal.fs-sheet{
  position:relative;
  display:flex; flex-direction:column; gap:8px;
  height:calc(100vh - 40px); height:calc(100dvh - 40px - var(--sat, 0px));
  max-height:900px;
  overflow:hidden;
  padding:14px 0 calc(14px + var(--sab, 0px));
  background:var(--ink-bg);
  border:1px solid rgba(var(--accent-rgb),0.30);
  border-bottom:none;
  border-radius:26px 26px 0 0;
  color:var(--paper);
  font-family:'Inter',sans-serif;
  box-shadow:0 -8px 32px rgba(0,0,0,0.30);
}
html.platform-ios .modal.fs-sheet{ max-height:900px; padding-bottom:calc(14px + var(--sab, 0px)); }
.modal.fs-sheet.fs-noanim{ animation:none; }
.fs-goldline{ position:absolute; left:30px; right:30px; top:0; height:3px; background:linear-gradient(90deg, transparent, var(--accent), transparent); border-radius:0 0 3px 3px; pointer-events:none; }
.fs-grab{ align-self:center; width:40px; height:5px; border-radius:3px; background:var(--border-strong); flex-shrink:0; }
.fs-scroll{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 17px; display:flex; flex-direction:column; gap:10px; }
.fs-top-label{ align-self:center; flex-shrink:0; line-height:16px; text-align:center; padding:0 60px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; box-sizing:border-box; }
.fs-scroll > *{ flex-shrink:0; }
.fs-foot{ flex-shrink:0; padding:0 17px; display:grid; grid-template-columns:1fr 1.6fr; gap:10px; }
.fs-btn-ghost, .fs-btn-gold{ height:48px; border-radius:12px; font:600 16px 'Inter',sans-serif; cursor:pointer; }
.fs-btn-ghost{ background:transparent; border:1px solid var(--border-strong); color:var(--paper); }
.fs-btn-gold{ background:var(--accent); border:none; color:var(--on-accent); font-weight:700; }
.fs-mono{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1px; color:var(--fs-sub); text-transform:uppercase; }
.fs-gold{ color:var(--fs-gold-text); }
.fs-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.fs-flex{ flex:1; }

/* Rubriken */
.fs-head{ display:flex; flex-direction:column; gap:4px; }
.fs-sheet .fs-title-input{ border:none; border-bottom:2px solid var(--accent); border-radius:0; background:transparent; color:var(--paper); font:600 26px 'Fraunces',serif; padding:2px 0 8px; outline:none; width:100%; box-shadow:none; }
.fs-sheet .fs-title-input::placeholder{ color:var(--muted); opacity:0.7; }
.fs-note{ display:flex; gap:8px; align-items:center; font-size:13px; color:var(--fs-sub); background:var(--accent-soft); border-radius:10px; padding:8px 10px; }
.fs-note svg{ width:15px; height:15px; flex-shrink:0; }

/* Segmentreglage */
.fs-sec{ display:flex; flex-direction:column; gap:8px; }
.fs-sec-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:32px; }
.fs-sec-actions{ display:flex; align-items:center; gap:12px; }
.fs-seg{ display:flex; padding:4px; border-radius:14px; background:var(--fs-field); border:1px solid var(--border); }
.fs-seg-opt{ flex:1; min-width:0; height:40px; border:none; border-radius:10px; background:transparent; color:var(--fs-sub); font:600 14.5px 'Inter',sans-serif; cursor:pointer; padding:0 4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-seg-opt.on{ background:var(--accent); color:var(--on-accent); }

/* Kortet med fast höjd */
.fs-card{ box-sizing:border-box; border-radius:16px; background:var(--card); border:1px solid var(--border); padding:12px; display:flex; flex-direction:column; gap:10px; position:relative; }
.fs-card-rem{ height:170px; }
.fs-card-chore{ height:204px; }
.fs-card-list{ height:112px; gap:8px; }
.fs-card-text{ justify-content:center; }
.fs-card-strong{ font-size:14px; font-weight:600; }
.fs-text{ font-size:13.5px; color:var(--fs-sub); line-height:1.4; }
.fs-text-mid{ min-height:40px; display:flex; align-items:center; }
.fs-dt-row{ display:grid; grid-template-columns:1fr; gap:8px; }
.fs-dt-row.two{ grid-template-columns:1.5fr 1fr; }
.fs-box{ position:relative; height:46px; box-sizing:border-box; border-radius:12px; background:var(--fs-field); border:1px solid var(--border-strong); display:flex; align-items:center; justify-content:space-between; gap:6px; padding:0 12px; font-size:15.5px; font-weight:600; color:var(--paper); cursor:pointer; min-width:0; }
.fs-card-list .fs-box{ height:44px; font-size:15px; }
.fs-box-text{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-box-text:empty::before{ content:'\2014'; color:var(--muted); }
.fs-box-grow{ flex:1; }
.fs-box-inline{ flex:1; height:40px; font-size:14px; }
.fs-ico{ width:16px; height:16px; color:var(--fs-sub); flex-shrink:0; }
.fs-native{ position:absolute; inset:0; width:100%; height:100%; opacity:0; border:none; padding:0; margin:0; font-size:16px; cursor:pointer; -webkit-appearance:none; appearance:none; background:transparent; color:transparent; }
.fs-native::-webkit-calendar-picker-indicator{ position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.fs-chips, .fs-freqs{ display:flex; gap:6px; }
.fs-chip{ position:relative; height:34px; padding:0 12px; border-radius:999px; background:transparent; border:1px solid var(--border-strong); color:var(--paper); font:600 13px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; }
.fs-chip.on{ background:var(--accent-soft); border-color:var(--accent); }
.fs-freq{ flex:1; justify-content:center; padding:0 4px; height:36px; font-weight:500; }
.fs-freq.on{ font-weight:700; }
.fs-pickchip{ border-style:dashed; overflow:hidden; }
.fs-pickchip.on{ border-style:solid; color:var(--fs-gold-text); }

/* Sluttid / Notis på morgonen */
.fs-slot{ display:flex; align-items:center; gap:6px; min-height:44px; border-top:1px solid var(--fs-line); padding-top:4px; }
.fs-slot-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fs-slot-text b{ font-size:14.5px; font-weight:600; }
.fs-slot-text span{ font-size:12px; color:var(--fs-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-slot-btn{ height:34px; padding:0 12px; border-radius:10px; border:none; background:var(--fs-field); color:var(--fs-gold-text); font:700 13.5px 'Inter',sans-serif; cursor:pointer; }
.fs-slot-val{ font-size:14px; font-weight:700; color:var(--fs-gold-text); padding:0 4px; }
.fs-end{ display:flex; align-items:center; gap:6px; min-height:44px; border-top:1px solid var(--fs-line); padding-top:4px; }
.fs-endbox{ position:relative; flex:1; min-width:0; height:40px; box-sizing:border-box; border-radius:10px; background:var(--fs-field); border:1px solid var(--accent); display:flex; align-items:center; gap:6px; padding:0 10px; cursor:pointer; }
.fs-endbox-k{ font-size:12px; color:var(--fs-sub); }
.fs-endbox b{ font-size:15px; font-weight:700; }
.fs-endbox .fs-ico{ margin-left:auto; width:15px; height:15px; }
.fs-durchip{ height:34px; padding:0 9px; border-radius:10px; background:var(--card); border:1px solid var(--border-strong); color:var(--paper); font:500 12.5px 'Inter',sans-serif; white-space:nowrap; cursor:pointer; }
.fs-durchip.on{ background:var(--accent-soft); border-color:var(--accent); font-weight:700; }
.fs-iconbtn{ width:34px; height:36px; border:none; background:transparent; color:var(--fs-sub); padding:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }

/* Flytande + frågetecken */
.fs-float-row{ display:flex; align-items:center; gap:4px; min-height:34px; position:relative; }
.fs-card-list .fs-float-row{ margin-top:auto; }
.fs-float-label{ font-size:14.5px; font-weight:600; }
.fs-help{ position:static; display:inline-flex; }
.fs-help-btn{ width:34px; height:34px; border:none; background:transparent; padding:0; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.fs-help-btn > span{ width:22px; height:22px; box-sizing:border-box; border-radius:11px; border:1px solid var(--border-strong); color:var(--fs-sub); font:700 12px 'Inter',sans-serif; display:flex; align-items:center; justify-content:center; }
.fs-help.open .fs-help-btn > span{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.fs-pop{ display:none; position:absolute; left:-4px; right:-4px; z-index:5; background:var(--card-raised); border:1px solid var(--accent); border-radius:14px; padding:12px 14px; box-shadow:var(--shadow); flex-direction:column; gap:6px; font-size:13.5px; line-height:1.45; color:var(--paper); text-align:left; }
body.light-theme .fs-pop{ background:#FFFDF8; }
.fs-help.open .fs-pop{ display:flex; }
.fs-help.above .fs-pop{ bottom:calc(100% + 10px); }
.fs-help.below .fs-pop{ top:calc(100% + 10px); }
.fs-pop b{ font-weight:700; }
.fs-pop::after{ content:''; position:absolute; left:var(--fs-arrow, 76px); width:12px; height:12px; background:inherit; transform:rotate(45deg); }
.fs-help.above .fs-pop::after{ bottom:-7px; border-right:1px solid var(--accent); border-bottom:1px solid var(--accent); }
.fs-help.below .fs-pop::after{ top:-7px; border-left:1px solid var(--accent); border-top:1px solid var(--accent); }
.fs-card-label{ position:relative; display:flex; align-items:center; gap:2px; height:22px; }
.fs-card-label .fs-help-btn{ margin:-6px 0; }
.fs-card-label .fs-help-btn > span{ width:20px; height:20px; font-size:11px; }
.fs-card-label{ --fs-arrow:178px; }

/* Reglage (på/av) */
.fs-switch{ position:relative; display:inline-flex; width:44px; height:26px; flex-shrink:0; cursor:pointer; }
.fs-switch input{ position:absolute; inset:0; opacity:0; margin:0; cursor:pointer; }
.fs-switch-ui{ position:absolute; inset:0; border-radius:999px; background:var(--fs-field); border:1px solid var(--border-strong); box-sizing:border-box; transition:background .15s, border-color .15s; }
.fs-switch-ui::after{ content:''; position:absolute; left:3px; top:3px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:left .15s, background .15s; }
.fs-switch input:checked + .fs-switch-ui{ background:var(--accent-soft); border-color:var(--accent); }
.fs-switch input:checked + .fs-switch-ui::after{ left:21px; background:var(--accent); }
.fs-switch input:focus-visible + .fs-switch-ui{ outline:2px solid var(--accent); outline-offset:2px; }
.fs-sheet .switch{ width:44px; height:26px; box-sizing:border-box; background:var(--fs-field); }
.fs-sheet .switch .knob{ top:3px; left:3px; }
.fs-sheet .switch.on{ background:var(--accent-soft); }
.fs-sheet .switch.on .knob{ left:21px; }
.fs-sheet .switch.disabled{ opacity:0.5; cursor:default; }

/* "Ingen dag" */
.fs-preview{ background:var(--fs-field); border-radius:12px; }
.fs-preview-row{ display:flex; align-items:center; gap:10px; min-height:36px; padding:0 12px; color:var(--fs-sub); font-size:14px; }
.fs-preview-row + .fs-preview-row{ border-top:1px solid var(--fs-line); }
.fs-preview-row.new{ color:var(--paper); font-weight:600; }
.fs-preview-ring{ width:16px; height:16px; box-sizing:border-box; border-radius:8px; border:2px solid var(--border-strong); flex-shrink:0; }
.fs-preview-row.new .fs-preview-ring{ border-color:var(--accent); }
.fs-preview-title{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-preview-new{ margin-left:auto; font-size:11.5px; color:var(--fs-gold-text); font-weight:700; }
.fs-giveday{ display:flex; gap:6px; align-items:center; font-size:12.5px; color:var(--fs-sub); margin-top:auto; }
.fs-giveday .fs-chip{ background:var(--card); font-size:12.5px; }

/* Raderna */
.fs-rows{ background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.fs-row{ width:100%; display:flex; align-items:center; gap:10px; min-height:44px; padding:0 14px; border:none; border-top:1px solid var(--fs-line); background:transparent; color:var(--paper); text-align:left; font-family:'Inter',sans-serif; cursor:pointer; box-sizing:border-box; }
.fs-rows > .fs-row:first-child{ border-top:none; }
.fs-row.faded{ opacity:0.5; cursor:default; }
.fs-row-label{ flex:1; min-width:0; font-size:14.5px; }
.fs-row-two{ display:flex; flex-direction:column; padding:6px 0; }
.fs-turas-sub{ font-size:12px; color:var(--fs-sub); }
.fs-row-val{ font-size:13.5px; font-weight:600; color:var(--fs-sub); max-width:55%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-row-val.gold{ color:var(--fs-gold-text); }
.fs-chev{ width:14px; height:14px; color:var(--fs-sub); flex-shrink:0; }
.fs-row-static{ cursor:default; }

/* Dela med vänner */
.fs-share{ min-height:100px; box-sizing:border-box; display:flex; flex-direction:column; gap:6px; padding:12px 14px; border-radius:14px; border:1.5px solid rgba(var(--accent-rgb),0.35); background:transparent; }
.fs-share.on{ border-color:rgba(var(--accent-rgb),0.6); background:rgba(var(--accent-rgb),0.06); }
.fs-share-head{ display:flex; align-items:center; gap:12px; height:26px; }
.fs-share-title{ flex:1; min-width:0; font-size:15px; font-weight:700; }
.fs-share-sum{ font-size:12.5px; color:var(--fs-gold-text); font-weight:600; white-space:nowrap; }
.fs-share-off{ min-height:44px; display:flex; align-items:center; font-size:13px; color:var(--fs-sub); line-height:1.4; }
.fs-share-row{ display:flex; gap:6px; align-items:center; }
.fs-fchip{ flex-shrink:0; max-width:34%; height:44px; padding:0 16px; border-radius:999px; background:var(--fs-field); border:1px solid var(--border); color:var(--paper); font:500 14.5px 'Inter',sans-serif; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-fchip.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }
.fs-others{ flex:1; min-width:0; height:44px; padding:0 10px 0 6px; border-radius:12px; background:transparent; border:1px dashed var(--border-strong); color:var(--paper); display:flex; align-items:center; gap:6px; font:600 14px 'Inter',sans-serif; cursor:pointer; }
.fs-others.on{ border-style:solid; border-color:var(--accent); background:rgba(var(--accent-rgb),0.12); }
.fs-others-label{ flex:1; min-width:0; text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-stack{ display:flex; flex-shrink:0; }
.fs-av{ width:28px; height:28px; box-sizing:border-box; border-radius:14px; border:2px solid var(--ink-bg); display:flex; align-items:center; justify-content:center; font:700 11px 'Fraunces',serif; color:#2B2318; flex-shrink:0; }
.fs-stack .fs-av + .fs-av{ margin-left:-11px; }
.fs-av-lg{ width:32px; height:32px; border-radius:16px; font-size:13px; border:none; }
.fs-badge{ flex-shrink:0; min-width:22px; height:22px; padding:0 6px; box-sizing:border-box; border-radius:11px; background:var(--accent); color:var(--on-accent); font:800 12px 'Inter',sans-serif; display:flex; align-items:center; justify-content:center; }
.fs-email-btn{ flex-shrink:0; height:44px; padding:0 14px; border-radius:999px; background:transparent; border:1px dashed var(--border-strong); color:var(--fs-sub); font:600 14px 'Inter',sans-serif; cursor:pointer; }
.fs-share-email{ display:flex; align-items:flex-start; gap:4px; }
.fs-share-email .share-email{ flex:1; min-width:0; margin-top:0; }
.fs-share-email .share-email-row{ margin-top:0; }
.fs-share-email .share-email-input{ height:44px; border-radius:12px; border-color:var(--accent); font-size:15px; }
.fs-share-email .share-email-btn{ height:44px; border-radius:12px; background:var(--accent); border:none; color:var(--on-accent); font-weight:700; }
.fs-share-email .fs-iconbtn{ width:44px; height:44px; }

/* Ta bort / Avsluta */
.fs-danger-link, .fs-quiet-link{ height:44px; padding:0 12px; border:none; background:transparent; font:600 14.5px 'Inter',sans-serif; cursor:pointer; }
.fs-danger-link{ color:var(--red); align-self:center; }
.fs-quiet-link{ color:var(--fs-sub); padding:0 4px; }
.fs-danger-pair{ display:flex; justify-content:space-between; align-items:center; }
.fs-danger-pair .fs-danger-link{ padding:0 4px; font-size:14px; }

/* Egen sida i arket */
.fs-sub{ position:absolute; inset:0; z-index:6; background:var(--ink-bg); border-radius:26px 26px 0 0; padding:20px 17px calc(16px + var(--sab, 0px)); display:flex; flex-direction:column; gap:14px; box-sizing:border-box; }
.fs-sub-head{ display:flex; align-items:center; gap:8px; }
.fs-back{ width:44px; height:44px; margin-left:-8px; border-radius:22px; border:none; background:transparent; color:var(--paper); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; flex-shrink:0; }
.fs-sub-titles{ display:flex; flex-direction:column; min-width:0; }
.fs-sub-titles .fs-mono{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-sub-titles h3{ margin:0; font-family:'Fraunces',serif; font-size:23px; font-weight:600; color:var(--paper); }
.fs-sub-body{ flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
.fs-sub-body > div{ display:flex; flex-direction:column; gap:12px; }
.fs-sub-done{ flex-shrink:0; height:50px; border-radius:14px; }
.fs-sub-text{ margin:0; font-size:13px; color:var(--fs-sub); line-height:1.45; padding:0 2px; }
.fs-subcard{ background:var(--card); border:1px solid var(--border); border-radius:14px; padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.fs-subcard .persist-row{ margin:0; padding:0; border:none; background:transparent; }
.fs-subcard .persist-title{ font-size:15px; font-weight:700; }
.fs-subcard .persist-sub{ font-size:12.5px; color:var(--fs-sub); }
.fs-toggle-row{ display:flex; align-items:center; gap:12px; }
.fs-toggle-text{ flex:1; display:flex; flex-direction:column; gap:2px; }
.fs-toggle-text b{ font-size:15px; font-weight:700; }
.fs-toggle-text span{ font-size:12.5px; color:var(--fs-sub); line-height:1.4; }
.fs-grid3{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.fs-opt{ height:48px; border-radius:12px; background:var(--card); border:1px solid var(--border-strong); color:var(--paper); font:500 14px 'Inter',sans-serif; cursor:pointer; }
.fs-opt.on{ background:var(--accent-soft); border-color:var(--accent); font-weight:700; }
.fs-list{ background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.fs-radio, .fs-frow{ width:100%; display:flex; align-items:center; gap:12px; min-height:48px; padding:0 14px; border:none; border-top:1px solid var(--fs-line); background:transparent; color:var(--paper); text-align:left; font:500 15px 'Inter',sans-serif; cursor:pointer; box-sizing:border-box; }
.fs-list > :first-child{ border-top:none; }
.fs-radio-label, .fs-frow-name{ flex:1; min-width:0; }
.fs-ring{ width:22px; height:22px; box-sizing:border-box; border-radius:11px; border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.fs-radio.on{ font-weight:700; }
.fs-radio.on .fs-ring{ border-color:var(--accent); }
.fs-radio.on .fs-ring::after{ content:''; width:10px; height:10px; border-radius:5px; background:var(--accent); }
.fs-fcheck{ width:24px; height:24px; box-sizing:border-box; border-radius:12px; border:2px solid var(--border-strong); display:flex; align-items:center; justify-content:center; color:transparent; flex-shrink:0; }
.fs-frow.on{ font-weight:700; }
.fs-frow.on .fs-fcheck{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.fs-search{ display:flex; align-items:center; gap:8px; height:44px; padding:0 12px; border-radius:12px; background:var(--card); border:1px solid var(--border-strong); color:var(--fs-sub); flex-shrink:0; }
.fs-search input{ flex:1; min-width:0; border:none; background:transparent; font:400 15px 'Inter',sans-serif; color:var(--paper); outline:none; padding:0; height:40px; }
.fs-dashed-btn{ height:44px; border-radius:12px; background:transparent; border:1px dashed var(--border-strong); color:var(--fs-sub); font:600 14px 'Inter',sans-serif; cursor:pointer; flex-shrink:0; }
.fs-inline-row{ display:flex; gap:8px; align-items:center; }
.fs-sheet .fs-input{ height:44px; box-sizing:border-box; border-radius:12px; background:var(--fs-field); border:1px solid var(--border-strong); color:var(--paper); padding:0 12px; font:500 15px 'Inter',sans-serif; flex:1; min-width:0; }
.fs-sheet .fs-input-num{ flex:0 0 76px; }
.fs-btn-small{ height:44px; padding:0 14px; border-radius:12px; border:1px solid var(--border-strong); background:transparent; color:var(--paper); font:700 14px 'Inter',sans-serif; cursor:pointer; }
.fs-btn-small.gold{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.fs-link{ border:none; background:transparent; color:var(--fs-gold-text); font:600 13px 'Inter',sans-serif; padding:6px 2px; cursor:pointer; text-align:left; align-self:flex-start; }
.fs-link-select{ border:none; background:transparent; color:var(--fs-gold-text); font:600 13px 'Inter',sans-serif; padding:6px 0; max-width:130px; }
.fs-until{ flex-direction:row; align-items:center; padding:6px 6px 6px 14px; }
.fs-until-label{ font-size:15px; flex-shrink:0; }
.fs-wdays{ display:flex; justify-content:space-between; gap:4px; }
.fs-sheet .fs-wd{ width:40px; height:40px; min-width:0; padding:0; border-radius:20px; background:var(--card); border:1px solid var(--border-strong); color:var(--paper); font:500 13px 'Inter',sans-serif; }
.fs-sheet .fs-wd.active{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }
.fs-subcard .monthly-mode-pills, .fs-monthly .monthly-mode-pills{ gap:6px; }
.fs-monthly label{ display:none; }
.fs-monthly .monthly-mode-pill{ padding:7px 10px; font-size:12.5px; }
.fs-textarea{ height:150px; box-sizing:border-box; border-radius:14px; background:var(--card); border:1px solid var(--border-strong); padding:12px; resize:none; font:400 15px/1.45 'Inter',sans-serif; color:var(--paper); flex-shrink:0; }
.fs-catchips{ display:flex; flex-wrap:wrap; gap:6px; }
.fs-sheet .fs-catchip{ height:40px; padding:0 14px; border-radius:999px; background:var(--card); border:1px solid var(--border-strong); color:var(--paper); display:inline-flex; align-items:center; gap:8px; font:500 14px 'Inter',sans-serif; cursor:pointer; margin:0; }
.fs-sheet .fs-catchip.active{ background:var(--accent-soft); border-color:var(--accent); font-weight:700; color:var(--paper); }
.fs-catchip-new{ background:transparent !important; border-style:dashed !important; color:var(--fs-sub) !important; font-weight:600 !important; }
.fs-dot{ width:10px; height:10px; border-radius:5px; flex-shrink:0; }
.fs-dot-none{ border:1.5px solid var(--border-strong); box-sizing:border-box; }

/* Varor (listor) */
.fs-items{ background:var(--card); border:1px solid var(--border); border-radius:14px; }
.fs-items .list-item-rows{ display:block; margin:0; gap:0; }
.fs-sheet .fs-items .list-item-row{ position:relative; display:flex; align-items:center; gap:0; min-height:46px; padding:0; background:transparent; border:none; border-top:1px solid var(--fs-line); border-radius:0; font-size:15.5px; color:var(--paper); }
.fs-sheet .fs-items .list-item-row:first-child{ border-top:none; }
.fs-sheet .fs-items .list-item-drag-handle{ width:44px; height:46px; color:var(--muted); font-size:inherit; }
.fs-sheet .fs-items .list-item-text{ flex:1; min-width:0; overflow-wrap:anywhere; padding:8px 0; }
.fs-sheet .fs-items .prio-chip{ margin-right:2px; }
.fs-item-x{ width:44px; height:46px; border:none; background:transparent; color:var(--accent); padding:0; display:flex; align-items:center; justify-content:center; flex-shrink:0; cursor:pointer; }
.fs-sheet .fs-items .list-item-row.sortable-chosen, .fs-sheet .fs-items .list-item-row.sortable-drag{ background:var(--card-raised); border:1.5px solid var(--accent); border-radius:12px; box-shadow:0 10px 24px rgba(0,0,0,0.25); }
.fs-sheet .fs-items .list-item-row.sortable-chosen .list-item-drag-handle{ color:var(--accent); }
.fs-sheet .fs-items .shopping-item-drag-ghost{ opacity:1; background:transparent; border:none; box-shadow:inset 0 3px 0 var(--accent); }
.fs-sheet .fs-items .shopping-item-drag-ghost > *{ opacity:0.25; }
.fs-additem{ display:flex; align-items:center; gap:8px; min-height:50px; padding:0 6px 0 14px; border-top:1px solid var(--fs-line); color:var(--accent); }
.fs-items .list-item-rows:empty + .fs-additem{ border-top:none; }
.fs-additem input{ flex:1; min-width:0; height:40px; border:none; background:transparent; font:400 15.5px 'Inter',sans-serif; color:var(--paper); outline:none; padding:0; box-shadow:none; }
.fs-addbtn{ height:36px; padding:0 14px; border-radius:10px; border:1px solid var(--border-strong); background:transparent; color:var(--paper); font:700 13.5px 'Inter',sans-serif; cursor:pointer; flex-shrink:0; }
.fs-addbtn.ready{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); }

/* Sysslan */
.fs-counter-row{ display:flex; gap:8px; align-items:center; }
.fs-var{ font-size:14px; font-weight:600; }
.fs-counter{ display:flex; align-items:center; height:44px; border-radius:12px; background:var(--fs-field); border:1px solid var(--border-strong); flex-shrink:0; }
.fs-counter button{ width:40px; height:44px; border:none; background:transparent; color:var(--paper); font:600 20px 'Inter',sans-serif; padding:0; cursor:pointer; }
.fs-counter span{ min-width:22px; text-align:center; font-size:17px; font-weight:700; }
.fs-unitseg{ flex:1; min-width:0; display:flex; height:44px; box-sizing:border-box; padding:3px; border-radius:12px; background:var(--fs-field); border:1px solid var(--border-strong); }
.fs-unit{ flex:1; min-width:0; border:none; border-radius:9px; background:transparent; color:var(--paper); font:500 13.5px 'Inter',sans-serif; padding:0 2px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-unit.on{ background:var(--card); font-weight:700; box-shadow:0 1px 2px rgba(0,0,0,0.12); }
.fs-start-row{ margin-top:auto; display:flex; align-items:center; gap:6px; min-height:40px; border-top:1px solid var(--fs-line); padding-top:6px; }
.fs-start-text{ flex:1; min-width:0; display:flex; flex-direction:column; }
.fs-start-text b{ font-size:14px; font-weight:600; }
.fs-start-text span{ font-size:12px; color:var(--fs-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fs-start-row .fs-chip{ padding:0 11px; font-size:12.5px; }
@media (max-width:360px){
  .fs-seg-opt{ font-size:13px; }
  .fs-chip{ padding:0 9px; }
  .fs-durchip{ padding:0 6px; }
}
@media (min-width:600px){
  .modal.fs-sheet{ max-height:min(900px, calc(100dvh - 40px)); }
}
/* Välj dagar: månadskalender med flera val */
.fs-cal{ gap:8px; }
.fs-cal-head{ display:flex; align-items:center; justify-content:space-between; }
.fs-cal-head b{ font-size:15px; font-weight:700; }
.fs-cal-head .fs-iconbtn{ width:40px; height:40px; color:var(--paper); }
.fs-cal-head .fs-iconbtn:disabled{ opacity:0.3; }
.fs-cal-next svg{ transform:rotate(180deg); }
.fs-cal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:4px; justify-items:center; }
.fs-cal-wd{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--fs-sub); padding:2px 0 4px; }
.fs-cal-day, .fs-cal-empty{ width:40px; height:40px; }
.fs-cal-day{ border-radius:20px; border:1px solid transparent; background:transparent; color:var(--paper); font:500 14.5px 'Inter',sans-serif; padding:0; cursor:pointer; }
.fs-cal-day.today{ border-color:var(--accent); }
.fs-cal-day.on{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); font-weight:700; }
.fs-cal-day:disabled{ opacity:0.3; cursor:default; }
.fs-cal-foot{ display:flex; justify-content:space-between; gap:8px; font-size:12.5px; color:var(--fs-sub); padding-top:2px; }
.fs-cal-foot span:first-child{ color:var(--fs-gold-text); font-weight:700; }
.fs-pickbox{ width:100%; text-align:left; font-family:'Inter',sans-serif; }
@media (max-width:360px){ .fs-cal-day, .fs-cal-empty{ width:36px; height:36px; } }


/* ============================================================
   SKAPA-MENYN, ny (nov 2026): B "Allt syns direkt" + D "Vad är vad?"
   B: de tre översta som stora rutor, resten som små rutor i fyra
   kolumner. D: samma val grupperade, öppnas via "Vad är vad?".
   Luft i botten så att den runda stäng-knappen inte täcker något.
   ============================================================ */
#createMenuBox.cm2{
  --cm2-tile: var(--card);
  --cm2-sub: var(--muted);
  --cm2-gold: var(--accent);
  --cm2-field: var(--ink-bg-alt, rgba(255,255,255,0.06));
  display:flex; flex-direction:column; flex-wrap:nowrap; gap:12px;
  padding:18px 17px calc(152px + var(--sab, 0px));
  border-radius:26px 26px 0 0;
}
body.light-theme #createMenuBox.cm2{ --cm2-tile:#FBF8F2; --cm2-sub:#5C5243; --cm2-gold:#8A5E22; --cm2-field:#EFE7D8; background:#F5EFE6; }
#createMenuBox.cm2::before{ left:30px; right:30px; }
.cm2 .cm2-head{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0; flex:0 0 auto; }
.cm2 .cm2-head h3{ margin:0; font-family:'Fraunces',serif; font-size:24px; font-weight:600; flex:1; }
.cm2 .cm2-what-link{ color:var(--cm2-gold); font-size:14px; font-weight:600; padding:4px 0; }
.cm2 .create-menu-item-swatch{ display:inline-block; flex-shrink:0; }

/* Stora rutor */
.cm2-main{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px; }
.cm2-big{
  --sw:#B8823A;
  min-height:112px; height:auto; box-sizing:border-box; margin:0; padding:12px 10px;
  border-radius:18px; cursor:pointer; gap:8px;
  background:var(--cm2-tile);
  background:color-mix(in srgb, var(--sw) 14%, var(--cm2-tile));
  border:1px solid color-mix(in srgb, var(--sw) 45%, transparent);
  color:var(--paper); font-family:'Inter',sans-serif; text-align:left;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  transition:transform .12s ease;
}
.cm2-big:active, .cm2-small:active, .cm2-row:active{ transform:scale(0.97); }
.cm2-big.swatch-reminder{ --sw:var(--accent); }
.cm2-big.swatch-chore{ --sw:#C99FD8; }
.cm2-big.swatch-list{ --sw:#9FD8A0; }
.cm2-big.swatch-note{ --sw:#D8C89F; }
.cm2-big.swatch-countdown{ --sw:#9FC9D8; }
.cm2-big.swatch-birthday{ --sw:#E7A3B8; }
.cm2-big.swatch-schedule{ --sw:#7FB9D8; }
.cm2-big .cm2-big-sw{ width:30px; height:30px; border-radius:9px; }
.cm2-big-text{ display:flex; flex-direction:column; gap:1px; min-width:0; width:100%; }
.cm2-big-t{ font-size:15px; font-weight:700; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:clip; }
.cm2-big-d{ font-size:11.5px; color:var(--cm2-sub); line-height:1.3; overflow-wrap:normal; word-break:normal; hyphens:none; }

/* Små rutor */
.cm2-more{ display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px; }
.cm2-small{
  min-height:70px; box-sizing:border-box; margin:0; padding:6px 3px;
  border-radius:14px; cursor:pointer;
  background:var(--cm2-tile); border:1px solid var(--border-strong);
  color:var(--paper); font:600 11.5px/1.15 'Inter',sans-serif; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  transition:transform .12s ease;
}
body.light-theme .cm2-small{ border-color:rgba(43,35,24,0.12); }
.cm2-small .create-menu-item-swatch{ width:12px; height:12px; border-radius:6px; }
.cm2-small-t{ max-width:100%; overflow-wrap:normal; word-break:normal; hyphens:none; }
.cm2-small-t.cm2-one{ white-space:nowrap; overflow:hidden; }
.cm2-small-acct{ font-size:9.5px; font-weight:600; color:var(--cm2-sub); margin-top:-3px; }

/* D. Vad är vad? */
.cm2-what .cm2-head{ align-items:center; }
.cm2-back{ width:36px; height:36px; flex:0 0 36px; border-radius:10px; border:none; background:var(--cm2-field); color:var(--paper); display:flex; align-items:center; justify-content:center; padding:0; cursor:pointer; }
.cm2-back svg{ width:16px; height:16px; }
.cm2-hint{ font-size:12.5px; color:var(--cm2-sub); white-space:nowrap; }
.cm2-group{ display:flex; flex-direction:column; gap:6px; }
.cm2-group-label{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:1px; color:var(--cm2-sub); }
.cm2-rows{ background:var(--cm2-tile); border:1px solid var(--border-strong); border-radius:16px; overflow:hidden; }
body.light-theme .cm2-rows{ border-color:rgba(43,35,24,0.12); }
.cm2-row{
  width:100%; display:flex; align-items:center; gap:12px; min-height:50px; box-sizing:border-box;
  padding:6px 14px; margin:0; border:none; border-top:1px solid var(--border); border-radius:0;
  background:transparent; color:var(--paper); text-align:left; font-family:'Inter',sans-serif; cursor:pointer;
}
.cm2-row:first-child{ border-top:none; }
.cm2-row .create-menu-item-swatch{ width:12px; height:12px; border-radius:4px; }
.cm2-row-text{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.cm2-row-t{ font-size:15px; font-weight:700; display:flex; align-items:center; gap:8px; }
.cm2-row-d{ font-size:12.5px; color:var(--cm2-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm2-plus{ width:18px; height:18px; flex:0 0 18px; color:var(--cm2-gold); }

/* Liggande läge: stäng-knappen ligger i hörnet bredvid arket, så ingen
   extra luft behövs, och de små rutorna får plats på en rad. */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse), (orientation:landscape) and (min-width:700px) and (pointer:coarse){
  #createMenuBox.cm2{ padding-bottom:calc(18px + var(--sab, 0px)); }
  #createMenuBox.cm2 .cm2-head{ flex:0 0 auto; }
  .cm2-more{ grid-template-columns:repeat(7, minmax(0,1fr)); }
  .cm2-big{ min-height:76px; flex-direction:row; align-items:center; justify-content:flex-start; gap:12px; }
  .cm2-big .cm2-big-sw{ width:26px; height:26px; border-radius:8px; }
}
/* D-sidan har egen tillbaka-knapp: dölj den runda stäng-knappen där så den
   inte täcker nedersta raden, och ta bort luften för den. */
#createMenuBox.cm2.cm2-what{ padding-bottom:calc(22px + var(--sab, 0px)); }
body:has(#createMenuBox.cm2-what) .fab{ display:none; }