diff --git a/public/index.html b/public/index.html
index 39e1fc8..b72ad89 100644
--- a/public/index.html
+++ b/public/index.html
@@ -81,13 +81,13 @@
   .cal-day-num { font-size: var(--calendar-size); font-weight: 400; color: #5C524A; text-align: right; padding-right: 2px; display: block; }
   .cal-day.today .cal-day-num { font-weight: 700; color: #C17F59; }
   .cal-day-dots { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 2px; }
-  .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
-  .dot.planned { opacity: 0.5; border: 1.5px dashed; background: transparent !important; }
+  .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
+  .dot.planned { opacity: 1; border: 2px dashed; background: transparent !important; }
 
   /* Legend */
   .legend { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 14px; padding: 8px 0; }
   .legend-item { display: flex; align-items: center; gap: 5px; font-size: calc(var(--font-size) - 2px); color: #5C524A; }
-  .legend-dot { width: 8px; height: 8px; border-radius: 50%; }
+  .legend-dot { width: 10px; height: 10px; border-radius: 50%; }
   .legend-row { width: 100%; display: flex; justify-content: center; gap: 16px; margin-top: 2px; }
   .legend-row span { font-size: calc(var(--font-size) - 3px); color: #B0A89E; }
 
@@ -414,7 +414,7 @@ async function init() {
     `<div class="legend-item"><div class="legend-dot" style="background:${m.color}"></div>${m.name}</div>`
   ).join('') + `
     <div class="legend-row">
-      <div class="legend-item"><div class="legend-dot" style="background:#999;opacity:0.5;border:1.5px dashed #999;box-sizing:border-box;"></div><span>tervezett</span></div>
+      <div class="legend-item"><div class="legend-dot" style="background:transparent;border:2px dashed #999;box-sizing:border-box;"></div><span>tervezett</span></div>
       <div class="legend-item"><div class="legend-dot" style="background:#999"></div><span>megerősített</span></div>
     </div>`;
 
@@ -551,7 +551,7 @@ function renderBookings() {
     const end = new Date(b.end_date);
     const nights = Math.round((end - start) / 86400000);
     return `<div class="booking-item" style="border-left:3px solid ${color}">
-      <div class="booking-dot" style="background:${color};opacity:${b.status==='planned'?0.5:1}"></div>
+      <div class="booking-dot" style="background:${b.status==='planned'?'transparent':color};border:${b.status==='planned'?'2px dashed '+color:'none'};box-sizing:border-box;"></div>
       <div class="booking-info">
         <div class="booking-name">${m?.name || b.member_id}
           <span class="booking-badge ${b.status}">${b.status === 'confirmed' ? '✓ megerősített' : '○ tervezett'}</span>