feat: Passwordless cross-device authentication

- Arkitektur: docs/auth/passwordless-architecture.md
- Backend: iom/quixzoom-auth-service/ (FastAPI + Redis)
- Webb: quixzoom-market-pages/se/login/ (QR-kod + polling)
- App: iom/quixzoom-app/src/features/auth/ (push + deep links)

Flöde: QR-kod → app-godkännande → webb-inloggad

landvex-site/inspection-report.html

@@ -9,10 +9,10 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Inspektionsrapport — LandveX</title>
   <style>
-    /* ═══════════════════════════════════════════════════════
+    /* 
        LANDVEX INSPECTION REPORT — Light Mode, Print-ready
        PDF-optimerat: A4, inga bakgrunder i tryck
-    ═══════════════════════════════════════════════════════ */
+     */
     :root {
       --brand:         #0A84FF;
       --brand-dark:    #0060C0;
@@ -45,7 +45,7 @@
       line-height: 1.5;
     }
 
-    /* ── Screen toolbar ── */
+    /*  Screen toolbar  */
     .screen-toolbar {
       position: sticky; top: 0; z-index: 100;
       background: rgba(0,0,0,0.92);
@@ -64,7 +64,7 @@
     .toolbar-brand span { color: var(--text-primary); }
     .toolbar-actions { display: flex; gap: 10px; }
     .btn {
-      padding: 8px 18px; border-radius: 8px; border: none;
+      padding: 8px 18px; border-radius: var(--radius-md); border: none;
       font-family: inherit; font-size: 14px; font-weight: 600;
       cursor: pointer; transition: opacity 0.15s;
     }
@@ -72,7 +72,7 @@
     .btn-primary { background: var(--brand); color: #1d1d1f; }
     .btn-secondary { background: var(--surface-2); color: var(--text-primary); border: 1px solid var(--border); }
 
-    /* ── Main container ── */
+    /*  Main container  */
     .report-container {
       max-width: 900px; margin: 24px auto; padding: 0 24px;
     }
@@ -81,10 +81,10 @@
       .report-container { max-width: 100%; margin: 0; padding: 0; }
     }
 
-    /* ── Report page ── */
+    /*  Report page  */
     .report-page {
       background: var(--surface);
-      border-radius: 16px;
+      border-radius: var(--radius-lg);
       border: 1px solid var(--border);
       overflow: hidden;
       margin-bottom: 20px;
@@ -94,7 +94,7 @@
       .report-page:last-child { page-break-after: auto; }
     }
 
-    /* ── Report header ── */
+    /*  Report header  */
     .report-header {
       background: linear-gradient(135deg, var(--brand-dark) 0%, var(--brand) 100%);
       color: #1d1d1f; padding: 32px 40px;
@@ -110,7 +110,7 @@
     .report-badge {
       background: rgba(0,0,0,0.2);
       border: 1px solid rgba(0,0,0,0.3);
-      border-radius: 8px; padding: 4px 12px;
+      border-radius: var(--radius-md); padding: 4px 12px;
       font-size: 12px; font-weight: 700;
       text-transform: uppercase; letter-spacing: 0.5px;
     }
@@ -128,7 +128,7 @@
     .meta-label { font-size: 11px; opacity: 0.65; text-transform: uppercase; letter-spacing: 0.5px; }
     .meta-value { font-size: 14px; font-weight: 600; margin-top: 2px; }
 
-    /* ── Risk score band ── */
+    /*  Risk score band  */
     .risk-band {
       display: flex; align-items: center; justify-content: space-between;
       padding: 20px 40px;
@@ -138,14 +138,14 @@
     }
     .risk-score-block { display: flex; align-items: center; gap: 20px; }
     .risk-gauge {
-      width: 80px; height: 80px; border-radius: 50%;
+      width: 80px; height: 80px; border-radius: var(--radius-full);
       display: flex; flex-direction: column; align-items: center; justify-content: center;
       font-family: -apple-system, sans-serif;
       position: relative;
     }
     .risk-gauge-ring {
       position: absolute; inset: 0;
-      border-radius: 50%;
+      border-radius: var(--radius-full);
       border: 6px solid;
     }
     .risk-score-num { font-size: 28px; font-weight: 900; line-height: 1; }
@@ -155,7 +155,7 @@
     .risk-desc { font-size: 13px; color: var(--text-secondary); max-width: 320px; line-height: 1.5; }
     .risk-pills { display: flex; gap: 8px; flex-wrap: wrap; }
     .risk-pill {
-      padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
+      padding: 4px 12px; border-radius: var(--radius-xl); font-size: 12px; font-weight: 600;
       border: 1px solid;
     }
     .pill-green  { background: rgba(52,199,89,0.12);  color: #1a7a3a; border-color: rgba(52,199,89,0.3); }
@@ -163,7 +163,7 @@
     .pill-red    { background: rgba(255,59,48,0.12);  color: #c0160d; border-color: rgba(255,59,48,0.3); }
     .pill-blue   { background: rgba(10,132,255,0.12); color: #0055c0; border-color: rgba(10,132,255,0.3); }
 
-    /* ── Section layout ── */
+    /*  Section layout  */
     .section { padding: 28px 40px; border-bottom: 1px solid var(--border-light); }
     .section:last-child { border-bottom: none; }
     .section-title {
@@ -175,7 +175,7 @@
       content: ''; flex: 1; height: 1px; background: var(--border-light);
     }
 
-    /* ── Info grid ── */
+    /*  Info grid  */
     .info-grid {
       display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
       gap: 16px;
@@ -185,37 +185,37 @@
     .info-cell-value { font-size: 15px; font-weight: 500; color: var(--text-primary); margin-top: 3px; }
     .info-cell-value.highlight { color: var(--brand); font-weight: 700; }
 
-    /* ── Condition assessment ── */
+    /*  Condition assessment  */
     .condition-grid {
       display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
       gap: 14px;
     }
     .condition-card {
-      background: var(--surface-2); border-radius: 12px; padding: 16px;
+      background: var(--surface-2); border-radius: var(--radius-md); padding: 16px;
       border: 1px solid var(--border-light);
     }
     .condition-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
     .condition-label { font-size: 13px; font-weight: 600; }
     .condition-grade {
       font-size: 12px; font-weight: 700; padding: 2px 8px;
-      border-radius: 6px;
+      border-radius: var(--radius-sm);
     }
     .grade-a { background: rgba(52,199,89,0.15); color: #1a7a3a; }
     .grade-b { background: rgba(52,199,89,0.1);  color: #2a8a4a; }
     .grade-c { background: rgba(255,204,0,0.15); color: #7a5e00; }
     .grade-d { background: rgba(255,149,0,0.15); color: #a05800; }
     .grade-e { background: rgba(255,59,48,0.15); color: #c0160d; }
-    .condition-bar { height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; margin-bottom: 6px; }
-    .condition-fill { height: 100%; border-radius: 2px; }
+    .condition-bar { height: 4px; background: var(--border); border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 6px; }
+    .condition-fill { height: 100%; border-radius: var(--radius-sm); }
     .condition-note { font-size: 12px; color: var(--text-secondary); line-height: 1.4; }
 
-    /* ── Photo grid ── */
+    /*  Photo grid  */
     .photo-grid {
       display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
     }
     .photo-cell {
       aspect-ratio: 4/3; background: var(--surface-2);
-      border-radius: 10px; border: 1px dashed var(--border);
+      border-radius: var(--radius-md); border: 1px dashed var(--border);
       display: flex; flex-direction: column; align-items: center; justify-content: center;
       gap: 6px; color: var(--text-tertiary);
       font-size: 12px; text-align: center;
@@ -224,7 +224,7 @@
     .photo-cell-label { font-weight: 500; }
     .photo-cell-tag { font-size: 10px; color: var(--text-tertiary); }
 
-    /* ── Maintenance history ── */
+    /*  Maintenance history  */
     .history-timeline { display: flex; flex-direction: column; gap: 0; }
     .history-item {
       display: flex; gap: 16px;
@@ -238,7 +238,7 @@
       width: 32px; flex-shrink: 0;
     }
     .history-dot {
-      width: 12px; height: 12px; border-radius: 50%;
+      width: 12px; height: 12px; border-radius: var(--radius-full);
       border: 2px solid; flex-shrink: 0; margin-top: 3px;
     }
     .history-dot.done    { background: var(--green); border-color: var(--green); }
@@ -251,18 +251,18 @@
     .history-desc { font-size: 13px; color: var(--text-secondary); margin-top: 3px; line-height: 1.5; }
     .history-cost { font-size: 13px; font-weight: 600; color: var(--text-primary); margin-top: 4px; }
     .history-status {
-      font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px;
+      font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: var(--radius-xl);
       align-self: flex-start; margin-top: 2px;
     }
     .status-done    { background: rgba(52,199,89,0.12); color: #1a7a3a; }
     .status-planned { background: rgba(10,132,255,0.12); color: #0055c0; }
     .status-overdue { background: rgba(255,59,48,0.12); color: #c0160d; }
 
-    /* ── Recommendations ── */
+    /*  Recommendations  */
     .rec-list { display: flex; flex-direction: column; gap: 14px; }
     .rec-item {
       display: flex; gap: 14px; align-items: flex-start;
-      padding: 16px; border-radius: 12px;
+      padding: 16px; border-radius: var(--radius-md);
       border: 1px solid;
     }
     .rec-item.rec-high   { background: rgba(255,59,48,0.05);  border-color: rgba(255,59,48,0.2); }
@@ -270,7 +270,7 @@
     .rec-item.rec-low    { background: rgba(52,199,89,0.05);  border-color: rgba(52,199,89,0.2); }
     .rec-priority {
       font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.5px;
-      padding: 3px 10px; border-radius: 6px; flex-shrink: 0; margin-top: 2px;
+      padding: 3px 10px; border-radius: var(--radius-sm); flex-shrink: 0; margin-top: 2px;
     }
     .pri-high   { background: rgba(255,59,48,0.15); color: #c0160d; }
     .pri-medium { background: rgba(255,149,0,0.15); color: #a05800; }
@@ -282,14 +282,14 @@
     .rec-meta { font-size: 12px; }
     .rec-meta strong { color: var(--text-primary); }
 
-    /* ── Signature block ── */
+    /*  Signature block  */
     .signature-block {
       display: grid; grid-template-columns: 1fr 1fr; gap: 32px;
     }
     .sig-field { border-top: 1px solid var(--text-primary); padding-top: 8px; margin-top: 48px; }
     .sig-label { font-size: 12px; color: var(--text-secondary); }
 
-    /* ── Footer ── */
+    /*  Footer  */
     .report-footer {
       padding: 16px 40px;
       background: var(--surface-2); border-top: 1px solid var(--border);
@@ -437,7 +437,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 <div class="screen-toolbar">
   <a class="toolbar-brand" href="index.html">LandveX <span>Inspection</span></a>
   <div class="toolbar-actions">
-    <button class="btn btn-secondary" onclick="window.print()">🖨 Skriv ut / PDF</button>
+    <button class="btn btn-secondary" onclick="window.print()"> Skriv ut / PDF</button>
     <button class="btn btn-primary" onclick="window.location.href='dashboard.html'">← Dashboard</button>
   </div>
 </div>
@@ -445,7 +445,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
 <div class="report-container">
 <div class="report-page" id="report-main">
 
-  <!-- ── Header ── -->
+  <!--  Header  -->
   <div class="report-header">
     <div class="report-header-top">
       <div class="report-logo">Land<span>ve</span>X</div>
@@ -473,7 +473,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     </div>
   </div>
 
-  <!-- ── Risk score ── -->
+  <!--  Risk score  -->
   <div class="risk-band">
     <div class="risk-score-block">
       <div class="risk-gauge" id="gauge">
@@ -487,15 +487,15 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
       </div>
     </div>
     <div class="risk-pills" id="r-pills">
-      <span class="risk-pill pill-green">Brandskydd ✓</span>
-      <span class="risk-pill pill-green">El ✓</span>
+      <span class="risk-pill pill-green">Brandskydd <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
+      <span class="risk-pill pill-green">El <svg width="16" height="16" viewBox="0 0 16 16" fill="none"><path d="M3 8L6.5 11.5L13 4.5" stroke="#22c55e" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
       <span class="risk-pill pill-orange">Tak — åtgärd behövs</span>
       <span class="risk-pill pill-orange">VVS — planera service</span>
       <span class="risk-pill pill-blue">Energiklass C</span>
     </div>
   </div>
 
-  <!-- ── Asset info ── -->
+  <!--  Asset info  -->
   <div class="section">
     <div class="section-title">Fastighetsinformation</div>
     <div class="info-grid">
@@ -550,7 +550,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     </div>
   </div>
 
-  <!-- ── Condition assessment ── -->
+  <!--  Condition assessment  -->
   <div class="section">
     <div class="section-title">Skickundersökning</div>
     <div class="condition-grid">
@@ -621,44 +621,44 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     </div>
   </div>
 
-  <!-- ── Photos ── -->
+  <!--  Photos  -->
   <div class="section">
     <div class="section-title">Inspektionsfoton</div>
     <div class="photo-grid">
       <div class="photo-cell">
-        <div class="photo-cell-icon">📷</div>
+        <div class="photo-cell-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="#666" stroke-width="1.5"/><circle cx="8" cy="8.5" r="2.5" stroke="#666" stroke-width="1.5"/><path d="M5 4L6 2H10L11 4" stroke="#666" stroke-width="1.5"/></svg></div>
         <div class="photo-cell-label">Fasad Norr</div>
         <div class="photo-cell-tag">IMG_0001.jpg</div>
       </div>
       <div class="photo-cell">
-        <div class="photo-cell-icon">📷</div>
+        <div class="photo-cell-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="#666" stroke-width="1.5"/><circle cx="8" cy="8.5" r="2.5" stroke="#666" stroke-width="1.5"/><path d="M5 4L6 2H10L11 4" stroke="#666" stroke-width="1.5"/></svg></div>
         <div class="photo-cell-label">Takyta — Skada</div>
         <div class="photo-cell-tag">IMG_0002.jpg</div>
       </div>
       <div class="photo-cell">
-        <div class="photo-cell-icon">📷</div>
+        <div class="photo-cell-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="#666" stroke-width="1.5"/><circle cx="8" cy="8.5" r="2.5" stroke="#666" stroke-width="1.5"/><path d="M5 4L6 2H10L11 4" stroke="#666" stroke-width="1.5"/></svg></div>
         <div class="photo-cell-label">Elcentral</div>
         <div class="photo-cell-tag">IMG_0003.jpg</div>
       </div>
       <div class="photo-cell">
-        <div class="photo-cell-icon">📷</div>
+        <div class="photo-cell-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="#666" stroke-width="1.5"/><circle cx="8" cy="8.5" r="2.5" stroke="#666" stroke-width="1.5"/><path d="M5 4L6 2H10L11 4" stroke="#666" stroke-width="1.5"/></svg></div>
         <div class="photo-cell-label">VVS — pannrum</div>
         <div class="photo-cell-tag">IMG_0004.jpg</div>
       </div>
       <div class="photo-cell">
-        <div class="photo-cell-icon">📷</div>
+        <div class="photo-cell-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="#666" stroke-width="1.5"/><circle cx="8" cy="8.5" r="2.5" stroke="#666" stroke-width="1.5"/><path d="M5 4L6 2H10L11 4" stroke="#666" stroke-width="1.5"/></svg></div>
         <div class="photo-cell-label">Lastdock</div>
         <div class="photo-cell-tag">IMG_0005.jpg</div>
       </div>
       <div class="photo-cell">
-        <div class="photo-cell-icon">📷</div>
+        <div class="photo-cell-icon"><svg width="16" height="16" viewBox="0 0 16 16" fill="none"><rect x="2" y="4" width="12" height="9" rx="2" stroke="#666" stroke-width="1.5"/><circle cx="8" cy="8.5" r="2.5" stroke="#666" stroke-width="1.5"/><path d="M5 4L6 2H10L11 4" stroke="#666" stroke-width="1.5"/></svg></div>
         <div class="photo-cell-label">Sprinkler — hall</div>
         <div class="photo-cell-tag">IMG_0006.jpg</div>
       </div>
     </div>
   </div>
 
-  <!-- ── Maintenance history ── -->
+  <!--  Maintenance history  -->
   <div class="section">
     <div class="section-title">Underhållshistorik</div>
     <div class="history-timeline">
@@ -715,7 +715,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     </div>
   </div>
 
-  <!-- ── Recommendations ── -->
+  <!--  Recommendations  -->
   <div class="section">
     <div class="section-title">Åtgärdsrekommendationer</div>
     <div class="rec-list">
@@ -777,7 +777,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     </div>
   </div>
 
-  <!-- ── Signature ── -->
+  <!--  Signature  -->
   <div class="section">
     <div class="section-title">Signering</div>
     <div class="signature-block">
@@ -799,7 +799,7 @@ body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
     </div>
   </div>
 
-  <!-- ── Footer ── -->
+  <!--  Footer  -->
   <div class="report-footer">
     <span>LandveX Inspection System &copy; 2026 Wavult Group</span>
     <span id="footer-assetid">Fastighets-ID: LVX-2024-0091</span>