:root{
    --bg:#EFF2ED;
    --surface:#FBFBF7;
    --surface-hover:#F3F5EF;
    --ink:#1E2823;
    --ink-soft:#55605A;
    --ink-faint:#8A9289;
    --line:#D7DED2;
    --line-strong:#C3CCBE;
    --accent:#1F6F78;
    --accent-hover:#175860;
    --accent-ink:#FFFFFF;
    --accent-soft:#DCEAEA;
    --accent-soft-ink:#14515A;
    --group-material:#9C5A2E; --group-material-soft:#F1E2D3;
    --group-salj:#2E5FA8;     --group-salj-soft:#DCE6F5;
    --group-lager:#3F7D52;    --group-lager-soft:#DCEBDF;
    --group-ekonomi:#6B4E9C;  --group-ekonomi-soft:#E6DEF2;
    --stage-new:#8A9289;
    --stage-review:#C08A2E;
    --stage-decided:#4C6FA8;
    --stage-progress:#1F6F78;
    --stage-upcoming:#7A5FB0;
    --stage-done:#3F7D52;
    --unseen:#B23B2E;
    --unseen-glow:rgba(178,59,46,.30);
    --shadow-drawer:0 10px 40px rgba(20,30,25,.18);
    --shadow-card:0 1px 2px rgba(20,30,25,.06);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#171D1A;
      --surface:#1F2621;
      --surface-hover:#26302A;
      --ink:#ECEFE9;
      --ink-soft:#B4BDB2;
      --ink-faint:#7C8880;
      --line:#333F39;
      --line-strong:#445045;
      --accent:#4FB6B4;
      --accent-hover:#6BC7C5;
      --accent-ink:#0E1917;
      --accent-soft:#1E3B3B;
      --accent-soft-ink:#9FE0DE;
      --group-material:#D89A6A; --group-material-soft:#3A2C20;
      --group-salj:#8FB3E8;     --group-salj-soft:#22314A;
      --group-lager:#8FCB9E;    --group-lager-soft:#22362A;
      --group-ekonomi:#C3AEEA;  --group-ekonomi-soft:#33294A;
      --stage-new:#8C9790;
      --stage-review:#D9A64A;
      --stage-decided:#8FB3E8;
      --stage-progress:#4FB6B4;
      --stage-upcoming:#C3AEEA;
      --stage-done:#8FCB9E;
      --unseen:#E2685C;
      --unseen-glow:rgba(226,104,92,.32);
      --shadow-drawer:0 10px 40px rgba(0,0,0,.55);
      --shadow-card:0 1px 2px rgba(0,0,0,.3);
    }
  }
  :root[data-theme="dark"]{
    --bg:#171D1A; --surface:#1F2621; --surface-hover:#26302A;
    --ink:#ECEFE9; --ink-soft:#B4BDB2; --ink-faint:#7C8880;
    --line:#333F39; --line-strong:#445045;
    --accent:#4FB6B4; --accent-hover:#6BC7C5; --accent-ink:#0E1917;
    --accent-soft:#1E3B3B; --accent-soft-ink:#9FE0DE;
    --group-material:#D89A6A; --group-material-soft:#3A2C20;
    --group-salj:#8FB3E8;     --group-salj-soft:#22314A;
    --group-lager:#8FCB9E;    --group-lager-soft:#22362A;
    --group-ekonomi:#C3AEEA;  --group-ekonomi-soft:#33294A;
    --stage-new:#8C9790; --stage-review:#D9A64A; --stage-decided:#8FB3E8;
    --stage-progress:#4FB6B4; --stage-upcoming:#C3AEEA; --stage-done:#8FCB9E;
    --unseen:#E2685C; --unseen-glow:rgba(226,104,92,.32);
    --shadow-drawer:0 10px 40px rgba(0,0,0,.55);
    --shadow-card:0 1px 2px rgba(0,0,0,.3);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Public Sans", system-ui, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--accent);}
  button, input, select, textarea{font-family:inherit;}
  ::selection{background:var(--accent-soft); color:var(--accent-soft-ink);}

  :focus{outline:none;}
  :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px;}

  .wrap{max-width:1400px; margin:0 auto; padding:28px 32px 48px;}

  /* ---------- header ---------- */
  header{display:flex; flex-direction:column; gap:16px; margin-bottom:22px;}
  .header-row{display:flex; align-items:flex-start; justify-content:space-between; gap:20px; flex-wrap:wrap;}
  .lockup{display:flex; align-items:baseline; gap:10px;}
  .mark{font-size:20px; line-height:1;}
  h1{
    font-family:"Archivo", sans-serif;
    font-weight:800;
    font-size:clamp(24px,2.6vw,32px);
    letter-spacing:-0.01em;
    margin:0;
    text-wrap:balance;
  }
  .meta{
    font-size:12.5px;
    color:var(--ink-soft);
    margin-top:4px;
    max-width:60ch;
  }
  .meta b{color:var(--ink); font-weight:600;}

  .actions{display:flex; align-items:center; gap:10px;}
  .search{
    display:flex; align-items:center; gap:6px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:8px;
    padding:8px 12px;
    min-width:200px;
  }
  .search input{
    border:none; background:transparent; color:var(--ink);
    font-size:13.5px; width:100%;
  }
  .search input::placeholder{color:var(--ink-faint);}
  .search svg{flex:none; color:var(--ink-faint);}

  .btn{
    appearance:none; border:none; cursor:pointer;
    font-weight:700; font-size:13.5px;
    border-radius:8px; padding:9px 16px;
    display:inline-flex; align-items:center; gap:6px;
    white-space:nowrap;
  }
  .btn-primary{background:var(--accent); color:var(--accent-ink);}
  .btn-primary:hover{background:var(--accent-hover);}
  .btn-ghost{background:transparent; color:var(--ink-soft); border:1px solid var(--line);}
  .btn-ghost:hover{background:var(--surface-hover); color:var(--ink);}

  .filter-row{display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;}
  .chips{display:flex; gap:6px; flex-wrap:wrap;}
  .chip{
    border:1px solid var(--line); background:var(--surface);
    color:var(--ink-soft); font-size:12.5px; font-weight:600;
    padding:6px 12px; border-radius:999px; cursor:pointer;
  }
  .chip:hover{background:var(--surface-hover); color:var(--ink);}
  .chip[data-active="true"]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink);}
  .chip-group{display:inline-flex; align-items:stretch;}
  .ai-btn{
    display:none; appearance:none; cursor:pointer;
    border:1px solid var(--line); border-left:none; background:var(--surface); color:var(--accent);
    font-size:12px; font-weight:700; padding:0 9px; border-radius:0 999px 999px 0;
    align-items:center; gap:3px;
  }
  .ai-btn:hover{background:var(--accent-soft); border-color:var(--accent);}
  .ai-ready .ai-btn{display:inline-flex;}
  .ai-ready .chip-group .chip{border-top-right-radius:0; border-bottom-right-radius:0;}
  .ai-ready .chip-group .chip[data-active="true"] + .ai-btn{border-color:var(--accent);}
  .chip-sep{width:1px; height:18px; background:var(--line-strong); margin:0 4px; align-self:center;}

  /* ---------- AI-förslag ---------- */
  .ai-actions{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
  .ai-status{font-family:"IBM Plex Mono", monospace; font-size:12px; color:var(--ink-faint);}
  .ai-status.err{color:var(--unseen);}
  .ai-results{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
  .ai-card{
    border:1px solid var(--line); border-radius:10px; padding:12px 14px; background:var(--bg);
    display:flex; flex-direction:column; gap:6px;
  }
  .ai-card-top{display:flex; justify-content:space-between; gap:12px; align-items:flex-start;}
  .ai-card h3{font:600 14px/1.35 "Public Sans", sans-serif; margin:0; color:var(--ink); text-wrap:balance;}
  .ai-card p{margin:0; font-size:12.5px; line-height:1.5; color:var(--ink-soft);}
  .ai-card .why{font-size:12px; color:var(--ink-faint);}
  .ai-card .why b{color:var(--ink-soft); font-weight:600;}
  .ai-tags{display:flex; flex-wrap:wrap; gap:4px;}
  .ai-tag{
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; padding:1px 6px;
    background:var(--surface); border:1px solid var(--line); border-radius:6px; color:var(--ink-soft);
  }
  .ai-meta{display:flex; gap:12px; flex-wrap:wrap; font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-faint);}
  .ai-meta b{color:var(--ink); font-weight:600;}
  .ai-add{flex:none; padding:6px 12px; font-size:12.5px;}
  .ai-add:disabled{opacity:.6; cursor:default;}
  .chip-alert{display:inline-flex; align-items:center; gap:6px;}
  .chip-alert .chip-count{
    font-family:"IBM Plex Mono", monospace; font-size:10.5px; line-height:16px; padding:0 6px;
    border-radius:999px; background:var(--unseen); color:var(--accent-ink); font-variant-numeric:tabular-nums;
  }
  .chip-alert[data-active="true"]{background:var(--unseen); border-color:var(--unseen); color:var(--accent-ink);}
  .chip-alert[data-active="true"] .chip-count{background:rgba(255,255,255,.22); color:inherit;}

  /* ---------- utvecklingslogg ---------- */
  .modal-panel.wide{width:560px;}
  .devlog-summary{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:8px 8px 8px 11px;
    font-size:12.5px; color:var(--ink-soft);
  }
  .devlog-summary b{color:var(--ink); font-weight:600;}
  .devlog-summary .btn{padding:6px 12px; font-size:12.5px;}
  .devlog-form{display:grid; grid-template-columns:1fr 120px; gap:8px;}
  .devlog-form textarea, .devlog-form .btn{grid-column:1 / -1;}
  .devlog-form .btn{justify-self:start;}
  .devlog-list{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
  .devlog-entry{border-left:2px solid var(--accent); padding:2px 0 2px 10px;}
  .devlog-meta{display:flex; gap:8px; align-items:baseline; font-size:11.5px; color:var(--ink-faint);}
  .devlog-meta b{color:var(--ink); font-weight:700;}
  .devlog-meta .when{font-family:"IBM Plex Mono", monospace; font-variant-numeric:tabular-nums;}
  .devlog-hours{
    margin-left:auto; font-family:"IBM Plex Mono", monospace; font-size:10.5px; line-height:16px; padding:0 6px;
    border-radius:999px; background:var(--accent-soft); color:var(--accent-soft-ink);
  }
  .devlog-text{font-size:13px; color:var(--ink-soft); line-height:1.5; margin-top:3px; white-space:pre-wrap;}
  .devlog-note{font-size:11.5px; color:var(--ink-faint); margin:14px 0 0; padding-top:10px; border-top:1px dashed var(--line);}

  .formula{
    font-size:12px; color:var(--ink-faint);
    font-family:"IBM Plex Mono", monospace;
  }
  .formula b{color:var(--ink-soft); font-weight:600;}

  .controls{display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;}
  .ctl{display:flex; flex-direction:column; gap:4px;}
  .ctl-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600;}
  .ctl select, .ctl input{
    border:1px solid var(--line); background:var(--surface); color:var(--ink);
    border-radius:8px; padding:6px 9px; font-size:12.5px; font-weight:500;
    width:auto; min-width:160px;
  }
  .ctl input[type="number"]{width:120px; min-width:0;}
  .controls .btn{padding:7px 12px; font-size:12.5px;}

  /* ---------- board ---------- */
  .board-scroll{overflow-x:auto; padding-bottom:8px; margin:0 -32px; padding-left:32px; padding-right:32px;}
  .board{display:flex; gap:16px; align-items:flex-start; min-width:min-content;}
  .column{
    flex:0 0 288px; width:288px;
    display:flex; flex-direction:column; gap:10px;
  }
  .col-head{
    display:flex; align-items:center; gap:8px;
    padding:2px 4px 8px;
    border-bottom:2px solid var(--line-strong);
  }
  .col-dot{width:8px; height:8px; border-radius:50%; flex:none;}
  .col-title{
    font-family:"Archivo", sans-serif; font-weight:700;
    font-size:12.5px; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink); flex:1;
  }
  .col-count{
    font-family:"IBM Plex Mono", monospace; font-size:11.5px; font-weight:600;
    color:var(--ink-faint); background:var(--surface); border:1px solid var(--line);
    border-radius:999px; padding:1px 8px;
  }
  .col-head{position:relative;}
  .info-btn{
    appearance:none; border:1px solid var(--line-strong); background:transparent; color:var(--ink-faint);
    width:16px; height:16px; border-radius:50%; padding:0; flex:none; cursor:help;
    font:italic 700 10px/1 "Public Sans", sans-serif;
    display:inline-flex; align-items:center; justify-content:center;
  }
  .info-btn:hover, .col-head.open .info-btn{border-color:var(--accent); color:var(--accent);}
  .tip{
    display:none; position:absolute; top:calc(100% + 8px); left:0; width:264px; z-index:10;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:10px;
    padding:12px 14px; box-shadow:var(--shadow-drawer);
    font-family:"Public Sans", sans-serif; font-weight:400; font-size:12.5px; line-height:1.5;
    color:var(--ink-soft); text-transform:none; letter-spacing:0; text-align:left;
  }
  .tip::before{content:""; position:absolute; top:-10px; left:0; right:0; height:10px;}
  .tip b{display:block; color:var(--ink); font-weight:700; font-size:13px; margin-bottom:4px;}
  .tip .tip-when{margin-top:8px; padding-top:8px; border-top:1px solid var(--line); font-size:12px;}
  .tip .tip-when b{display:inline; font-size:12px; margin:0; color:var(--ink-soft); font-weight:600;}
  .info-btn:hover ~ .tip, .info-btn:focus-visible ~ .tip, .tip:hover, .col-head.open .tip{display:block;}
  .col-cards{display:flex; flex-direction:column; gap:10px; min-height:40px;}
  .col-empty{
    font-size:12px; color:var(--ink-faint); border:1.5px dashed var(--line);
    border-radius:10px; padding:14px 10px; text-align:center;
  }

  /* ---------- card ---------- */
  .card{
    position:relative;
    background:var(--surface); border:1px solid var(--line); border-radius:10px;
    padding:12px 13px; cursor:pointer; box-shadow:var(--shadow-card);
    display:flex; flex-direction:column; gap:8px;
    text-align:left; width:100%;
  }
  .card:hover{border-color:var(--line-strong); background:var(--surface-hover);}
  .card.unseen{
    border-color:var(--unseen);
    box-shadow:0 0 0 1px var(--unseen), 0 0 16px -3px var(--unseen-glow), var(--shadow-card);
  }
  .unseen-dot{
    position:absolute; top:-6px; right:-6px; width:11px; height:11px; border-radius:50%;
    background:var(--unseen); box-shadow:0 0 0 2px var(--surface), 0 0 8px 1px var(--unseen-glow);
  }
  .card-top{display:flex; align-items:center; justify-content:space-between; gap:8px;}
  .pill{
    font-size:10.5px; font-weight:700; letter-spacing:.02em;
    padding:2px 8px; border-radius:999px;
  }
  .pill-material{background:var(--group-material-soft); color:var(--group-material);}
  .pill-salj{background:var(--group-salj-soft); color:var(--group-salj);}
  .pill-lager{background:var(--group-lager-soft); color:var(--group-lager);}
  .pill-ekonomi{background:var(--group-ekonomi-soft); color:var(--group-ekonomi);}

  .card-value{display:flex; flex-direction:column; align-items:flex-end; gap:1px; flex:none;}
  .nuvarde{
    font-family:"IBM Plex Mono", monospace; font-weight:700; font-size:13px;
    color:var(--ink); font-variant-numeric:tabular-nums; white-space:nowrap;
  }
  .score{
    font-family:"IBM Plex Mono", monospace; font-weight:600; font-size:10.5px;
    color:var(--ink-faint);
    font-variant-numeric:tabular-nums;
  }
  .card-title{
    font-weight:600; font-size:14px; line-height:1.35; color:var(--ink);
  }
  .card-desc{
    font-size:12.5px; line-height:1.45; color:var(--ink-soft);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  }
  .latest-comment{
    font-size:11.5px; line-height:1.4; color:var(--ink-faint);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    border-left:2px solid var(--line-strong); padding-left:7px;
  }
  .latest-comment b{color:var(--ink-soft); font-weight:700;}
  .card-foot{display:flex; align-items:center; justify-content:space-between; gap:8px; margin-top:2px;}
  .who{display:flex; align-items:center; gap:6px; min-width:0;}
  .avatar{
    flex:none; width:20px; height:20px; border-radius:50%;
    background:var(--accent-soft); color:var(--accent-soft-ink);
    font-size:9.5px; font-weight:700; display:flex; align-items:center; justify-content:center;
  }
  .who span{font-size:11.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .card-stats{display:flex; align-items:center; gap:10px; flex:none;}
  .dots{font-size:10px; letter-spacing:1px; color:var(--line-strong);}
  .dots .filled{color:var(--accent);}
  .cost{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-faint);}
  .owner{
    font-size:10.5px; font-weight:600; color:var(--ink-soft);
    border:1px solid var(--line-strong); border-radius:999px; padding:1px 7px; white-space:nowrap;
  }
  .owner-k{color:var(--ink-faint); font-weight:500;}

  .deadline-row{display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--ink-soft); flex-wrap:wrap;}
  .deadline-row .dl-date{font-family:"IBM Plex Mono", monospace; color:var(--ink); font-variant-numeric:tabular-nums;}
  .deadline-row .dl-left{color:var(--ink-faint); font-weight:500;}
  .deadline-row.soon .dl-left{color:var(--stage-review); font-weight:600;}
  .deadline-row.late .dl-left{color:var(--unseen); font-weight:600;}

  /* ---------- loggar & milstolpar (detaljvy) ---------- */
  .log{display:flex; flex-direction:column; gap:5px; margin-top:8px; border-left:2px solid var(--line); padding-left:10px;}
  .log-row{display:grid; grid-template-columns:108px 1fr; gap:8px; font-size:11.5px; line-height:1.4;}
  .log-when{font-family:"IBM Plex Mono", monospace; color:var(--ink-faint); font-variant-numeric:tabular-nums; white-space:nowrap;}
  .log-what{color:var(--ink-soft);}
  .log-what b{color:var(--ink); font-weight:600;}
  .hint{font-size:11px; color:var(--ink-faint); margin-top:5px;}
  .hint:empty{display:none;}
  input:disabled, select:disabled{opacity:.5; cursor:not-allowed;}

  .ms-list{display:flex; flex-direction:column; gap:6px;}
  .ms-row{
    display:grid; grid-template-columns:1fr auto auto auto; gap:10px; align-items:center;
    background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:6px 6px 6px 10px; font-size:12.5px;
  }
  .ms-title{font-weight:600; color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .ms-meta{font-family:"IBM Plex Mono", monospace; font-size:11px; color:var(--ink-faint); white-space:nowrap; font-variant-numeric:tabular-nums;}
  .ms-remove{font-size:14px; padding:2px 6px;}
  .ms-sum{font-family:"IBM Plex Mono", monospace; font-size:11.5px; color:var(--ink-faint); margin-top:6px;}
  .ms-sum:empty{display:none;}
  .ms-form{display:grid; grid-template-columns:1fr 82px 138px; gap:6px; margin-top:8px;}
  .ms-form .btn{grid-column:1 / -1; justify-self:start;}
  .comment-count{display:flex; align-items:center; gap:3px; font-size:11px; color:var(--ink-faint);}

  .stamp{
    align-self:flex-start;
    border:1.5px dashed var(--accent);
    color:var(--accent);
    font-family:"IBM Plex Mono", monospace;
    font-size:9.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
    padding:2px 7px; border-radius:5px;
    transform:rotate(-3deg);
  }

  /* ---------- drawer ---------- */
  .backdrop{
    position:fixed; inset:0; background:rgba(10,14,12,.4);
    opacity:0; pointer-events:none; transition:opacity .18s ease;
    z-index:20;
  }
  .backdrop.open{opacity:1; pointer-events:auto;}

  .drawer{
    position:fixed; top:0; right:0; bottom:0; width:420px; max-width:92vw;
    background:var(--surface); border-left:1px solid var(--line);
    box-shadow:var(--shadow-drawer);
    transform:translateX(100%); transition:transform .22s ease;
    z-index:21; display:flex; flex-direction:column;
  }
  .drawer.open{transform:translateX(0);}
  .drawer-head{
    display:flex; align-items:flex-start; justify-content:space-between; gap:10px;
    padding:20px 20px 14px; border-bottom:1px solid var(--line);
  }
  .drawer-body{padding:18px 20px 24px; overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:20px;}
  .drawer-title{font-family:"Archivo",sans-serif; font-weight:700; font-size:19px; line-height:1.3; text-wrap:balance;}
  .icon-btn{
    appearance:none; border:none; background:transparent; cursor:pointer;
    color:var(--ink-faint); font-size:18px; line-height:1; padding:4px;
  }
  .icon-btn:hover{color:var(--ink);}

  .value-banner{
    background:var(--accent-soft); border:1px solid var(--accent);
    border-radius:10px; padding:12px 14px;
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  }
  .value-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent-soft-ink); font-weight:700;}
  .value-sub{font-size:11px; color:var(--accent-soft-ink); opacity:.75; margin-top:2px;}
  .value-figure{
    font-family:"IBM Plex Mono", monospace; font-weight:700; font-size:21px;
    color:var(--accent-soft-ink); font-variant-numeric:tabular-nums; white-space:nowrap;
  }

  .stat-row{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px;}
  .stat{
    background:var(--bg); border:1px solid var(--line); border-radius:8px;
    padding:9px 10px; display:flex; flex-direction:column; gap:3px;
  }
  .stat-label{font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600;}
  .stat-value{font-family:"IBM Plex Mono", monospace; font-size:15px; font-weight:600; color:var(--ink);}

  .field-label{font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-faint); font-weight:600; margin-bottom:6px; display:block;}
  .drawer-desc{font-size:13.5px; line-height:1.6; color:var(--ink-soft);}

  .stage-select{
    width:100%; border:1px solid var(--line); background:var(--bg); color:var(--ink);
    font-size:13px; font-weight:600; padding:8px 10px; border-radius:8px; cursor:pointer;
  }

  .comments{display:flex; flex-direction:column; gap:10px;}
  .comment{background:var(--bg); border:1px solid var(--line); border-radius:8px; padding:9px 11px;}
  .comment-author{font-size:11.5px; font-weight:700; color:var(--ink); margin-bottom:3px;}
  .comment-text{font-size:12.5px; color:var(--ink-soft); line-height:1.5;}
  .no-comments{font-size:12.5px; color:var(--ink-faint); font-style:italic;}

  .comment-form{display:flex; flex-direction:column; gap:8px;}
  textarea, input[type="text"], input[type="number"], input[type="date"]{
    border:1px solid var(--line); background:var(--bg); color:var(--ink);
    border-radius:8px; padding:9px 11px; font-size:13px; width:100%; resize:vertical;
  }
  textarea::placeholder, input::placeholder{color:var(--ink-faint);}

  /* ---------- modal ---------- */
  .modal{
    position:fixed; inset:0; z-index:30; display:flex; align-items:center; justify-content:center;
    padding:20px; opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .modal.open{opacity:1; pointer-events:auto;}
  .modal-panel{
    background:var(--surface); border:1px solid var(--line); border-radius:14px;
    box-shadow:var(--shadow-drawer);
    width:460px; max-width:100%; max-height:88vh; overflow-y:auto;
    padding:22px 24px 24px;
    transform:scale(.97); transition:transform .18s ease;
  }
  .modal.open .modal-panel{transform:scale(1);}
  .modal-head{display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:16px;}
  .modal-head h2{font-family:"Archivo",sans-serif; font-size:18px; font-weight:700; margin:0;}
  form{display:flex; flex-direction:column; gap:14px;}
  .form-row{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
  label{display:flex; flex-direction:column; gap:5px; font-size:12px; color:var(--ink-soft); font-weight:600;}
  select{border:1px solid var(--line); background:var(--bg); color:var(--ink); border-radius:8px; padding:9px 10px; font-size:13px;}
  .form-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:4px;}

  @media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important;}
  }

  @media (max-width:640px){
    .wrap{padding:20px 16px 40px;}
    .board-scroll{margin:0 -16px; padding-left:16px; padding-right:16px;}
    .drawer{width:100%; max-width:100%;}
  }

/* ---------- tillägg för serverversionen ---------- */
.userchip{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; color:var(--ink-soft);}
.userchip .avatar{width:24px; height:24px; font-size:10.5px;}
.userchip .btn{padding:6px 10px; font-size:12px;}
.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(20px);
  background:var(--ink); color:var(--bg); padding:10px 16px; border-radius:10px; font-size:13px;
  opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; z-index:50; max-width:90vw;
}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
.toast.err{background:var(--unseen); color:#fff;}
.ms-row input[type="checkbox"]{width:15px; height:15px; margin:0; accent-color:var(--accent); cursor:pointer;}
.ms-row .ms-title.done{text-decoration:line-through; color:var(--ink-faint);}
.readonly-note{font-size:11px; color:var(--ink-faint); margin-top:5px;}
.sync{font-family:"IBM Plex Mono", monospace; font-size:10.5px; color:var(--ink-faint);}
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; background:var(--bg);}
.login-card{
  width:380px; max-width:100%; background:var(--surface); border:1px solid var(--line); border-radius:14px;
  padding:28px 28px 24px; box-shadow:var(--shadow-card);
}
.login-card h1{font-size:26px; margin:0 0 4px;}
.login-card .meta{margin:0 0 20px;}
.login-err{font-size:12.5px; color:var(--unseen); min-height:18px; margin:6px 0 0;}