add to homescreen feature

src/App.css

@@ -1443,6 +1443,10 @@
     background: rgba(59, 130, 246, 0.12);
     color: #3b82f6;
 }
+.settings-item-icon-purple {
+    background: rgba(139, 92, 246, 0.12);
+    color: #7c3aed;
+}
 
 .settings-item-content {
     flex: 1;
@@ -2035,6 +2039,59 @@
     cursor: not-allowed;
 }
 
+/* iOS Install Modal */
+.ios-install-modal {
+    text-align: left;
+}
+
+.ios-install-icon {
+    font-size: 2.5rem;
+    text-align: center;
+    margin-bottom: 0.5rem;
+}
+
+.ios-install-modal .confirm-modal-title {
+    color: #1a1a1a;
+    text-align: center;
+}
+
+.ios-install-subtitle {
+    font-size: 0.85rem;
+    color: #6b7280;
+    margin: 0 0 1rem;
+    text-align: center;
+}
+
+.ios-install-steps {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.ios-install-steps li {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    font-size: 0.875rem;
+    color: #374151;
+    line-height: 1.4;
+}
+
+.ios-install-step-icon {
+    width: 34px;
+    height: 34px;
+    flex-shrink: 0;
+    background: rgba(139, 92, 246, 0.1);
+    color: #7c3aed;
+    border-radius: 8px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 /* ============================
    RESPONSIVE – DESKTOP (≥ 860px)
    Sidebar navigation + single-column content
@@ -2407,6 +2464,24 @@
     color: #60a5fa;
 }
 
+[data-theme="dark"] .settings-item-icon-purple {
+    background: rgba(167, 139, 250, 0.12);
+    color: #a78bfa;
+}
+
+[data-theme="dark"] .ios-install-modal .confirm-modal-title {
+    color: #e8f5e8;
+}
+
+[data-theme="dark"] .ios-install-steps li {
+    color: #d1d5db;
+}
+
+[data-theme="dark"] .ios-install-step-icon {
+    background: rgba(167, 139, 250, 0.12);
+    color: #a78bfa;
+}
+
 /* -- Settings buttons -- */
 [data-theme="dark"] .settings-tutorial-btn {
     background: #1a1a1a;