Add Walkthrough Mode styles

index.html

@@ -622,6 +622,231 @@
             50% { opacity: 1; }
             100% { opacity: 0.5; }
         }
+
+        /* Walkthrough Mode Styles */
+        .walkthrough-overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 9999;
+            display: none;
+            backdrop-filter: blur(4px);
+        }
+
+        .walkthrough-highlight {
+            position: absolute;
+            border: 3px solid #10b981;
+            border-radius: 0.5rem;
+            box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2), 0 0 30px rgba(16, 185, 129, 0.4);
+            pointer-events: none;
+            animation: pulse 2s infinite;
+            z-index: 10000;
+        }
+
+        .walkthrough-popup {
+            position: absolute;
+            background: #1f2937;
+            border: 2px solid #10b981;
+            border-radius: 1rem;
+            padding: 1.5rem;
+            max-width: 350px;
+            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
+            z-index: 10001;
+            color: white;
+        }
+
+        .walkthrough-popup::before {
+            content: '';
+            position: absolute;
+            width: 20px;
+            height: 20px;
+            background: #1f2937;
+            border: 2px solid #10b981;
+            transform: rotate(45deg);
+        }
+
+        .walkthrough-popup.top::before {
+            bottom: -12px;
+            left: 50%;
+            transform: translateX(-50%) rotate(45deg);
+            border-top: none;
+            border-left: none;
+        }
+
+        .walkthrough-popup.bottom::before {
+            top: -12px;
+            left: 50%;
+            transform: translateX(-50%) rotate(45deg);
+            border-bottom: none;
+            border-right: none;
+        }
+
+        .walkthrough-popup.left::before {
+            right: -12px;
+            top: 50%;
+            transform: translateY(-50%) rotate(45deg);
+            border-left: none;
+            border-bottom: none;
+        }
+
+        .walkthrough-popup.right::before {
+            left: -12px;
+            top: 50%;
+            transform: translateY(-50%) rotate(45deg);
+            border-right: none;
+            border-top: none;
+        }
+
+        .walkthrough-title {
+            font-size: 1.25rem;
+            font-weight: bold;
+            margin-bottom: 0.75rem;
+            color: #10b981;
+        }
+
+        .walkthrough-content {
+            font-size: 0.875rem;
+            line-height: 1.6;
+            color: #d1d5db;
+            margin-bottom: 1rem;
+        }
+
+        .walkthrough-buttons {
+            display: flex;
+            gap: 0.75rem;
+            justify-content: space-between;
+        }
+
+        .walkthrough-btn {
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            border: none;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s;
+            font-size: 0.875rem;
+        }
+
+        .walkthrough-btn-prev {
+            background: #374151;
+            color: white;
+        }
+
+        .walkthrough-btn-prev:hover {
+            background: #4b5563;
+        }
+
+        .walkthrough-btn-next {
+            background: #10b981;
+            color: white;
+        }
+
+        .walkthrough-btn-next:hover {
+            background: #059669;
+        }
+
+        .walkthrough-btn-skip {
+            background: #ef4444;
+            color: white;
+        }
+
+        .walkthrough-btn-skip:hover {
+            background: #dc2626;
+        }
+
+        .walkthrough-progress {
+            position: fixed;
+            top: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            background: #1f2937;
+            border: 2px solid #10b981;
+            border-radius: 2rem;
+            padding: 0.5rem 1.5rem;
+            color: white;
+            font-size: 0.875rem;
+            z-index: 10002;
+            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+        }
+
+        .walkthrough-task-menu {
+            display: none;
+            padding: 2rem;
+            max-width: 800px;
+            margin: 0 auto;
+        }
+
+        .walkthrough-task-card {
+            background: #1f2937;
+            border: 2px solid #10b981;
+            border-radius: 1rem;
+            padding: 1.5rem;
+            margin-bottom: 1rem;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .walkthrough-task-card:hover {
+            transform: translateY(-4px);
+            box-shadow: 0 20px 40px rgba(16, 185, 129, 0.2);
+        }
+
+        .walkthrough-task-title {
+            font-size: 1.25rem;
+            font-weight: bold;
+            color: #10b981;
+            margin-bottom: 0.5rem;
+        }
+
+        .walkthrough-task-description {
+            color: #d1d5db;
+            font-size: 0.875rem;
+            line-height: 1.6;
+        }
+
+        .walkthrough-indicator {
+            position: fixed;
+            top: 10px;
+            right: 10px;
+            background: #10b981;
+            color: white;
+            padding: 0.5rem 1rem;
+            border-radius: 0.5rem;
+            font-size: 0.875rem;
+            font-weight: 600;
+            z-index: 1000;
+            display: none;
+        }
+
+        /* Mobile-friendly adjustments */
+        @media (max-width: 640px) {
+            .walkthrough-popup {
+                max-width: calc(100vw - 2rem);
+                margin: 1rem;
+            }
+
+            .walkthrough-progress {
+                top: 10px;
+                font-size: 0.75rem;
+                padding: 0.4rem 1rem;
+            }
+
+            .walkthrough-title {
+                font-size: 1.125rem;
+            }
+
+            .walkthrough-content {
+                font-size: 0.8125rem;
+            }
+
+            .walkthrough-btn {
+                font-size: 0.8125rem;
+                padding: 0.4rem 0.8rem;
+            }
+        }
     </style>
 </head>
 <body>