Enhance theme management with new color variables, update service card styles, and add drag-and-drop functionality

styles.css

@@ -1,6 +1,22 @@
 /* Minimal, responsive grid layout */
 :root{
-  --bg:#0f1720;--card:#0b1220;--accent:#4f46e5;--muted:#94a3b8;color-scheme: dark;
+  /* Default theme colors - can be overridden by theme system */
+  --color-primary: #1a1a2e;
+  --color-secondary: #16213e;
+  --color-accent: #0f3460;
+  --color-text: #e4e4e4;
+  --color-text-muted: #a0a0a0;
+  --color-border: #2a2a3e;
+  --color-card-bg: rgba(30, 30, 46, 0.7);
+  --color-header-bg: rgba(26, 26, 46, 0.85);
+  --color-overlay-bg: rgba(60, 60, 60, 0.35);
+  
+  /* Legacy variables for compatibility */
+  --bg: var(--color-primary);
+  --card: var(--color-card-bg);
+  --accent: #4f46e5;
+  --muted: var(--color-text-muted);
+  color-scheme: dark;
 }
 *{box-sizing:border-box}
 html,body{height:100%;margin:0;font-family:Inter,Segoe UI,Roboto,Arial,sans-serif;background:#001a2d;color:#e6eef8;overflow-x:hidden}
@@ -58,4 +74,87 @@ main{max-width:1100px;margin:18px auto;padding:12px}
 #readme-content img{max-width:100%;height:auto;border-radius:6px;margin:12px 0}
 footer{padding:12px 20px;text-align:center;color:var(--muted);font-size:12px}
 
+/* Service cards - updated class name */
+.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
+.service-card{display:flex;align-items:center;justify-content:center;padding:18px;border-radius:10px;background:linear-gradient(135deg, rgba(10,37,64,0.85), rgba(15,50,85,0.85), rgba(20,45,75,0.85));text-decoration:none;color:inherit;border:1px solid rgba(255,255,255,0.2);font-weight:600;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;position:relative;overflow:hidden;backdrop-filter:blur(15px);-webkit-backdrop-filter:blur(15px)}
+.service-card::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(45deg,transparent 30%,rgba(255,255,255,0.08) 50%,transparent 70%);transform:rotate(45deg);animation:shimmer 8s infinite linear;pointer-events:none}
+.service-card:hover::before{animation-duration:3s}
+.service-card::after{content:'';position:absolute;inset:0;border-radius:10px;padding:1px;background:linear-gradient(135deg,rgba(79,70,229,0.5),rgba(139,92,246,0.3),rgba(236,72,153,0.5));-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;opacity:0;transition:opacity .3s ease}
+.service-card:hover{transform:translateY(-6px);box-shadow:0 10px 40px rgba(79,70,229,0.4),0 0 20px rgba(139,92,246,0.3);border-color:rgba(139,92,246,0.5)}
+.service-card:hover::after{opacity:1}
+.service-card.selected{transform:translateY(-4px);box-shadow:0 8px 30px rgba(79,70,229,0.5),0 0 15px rgba(139,92,246,0.4);border-color:rgba(139,92,246,0.7);outline:2px solid rgba(79,70,229,0.6);outline-offset:2px}
+
+/* Drag and drop styles */
+.service-card.drag-over{border-color:rgba(79,70,229,0.8);background:linear-gradient(135deg, rgba(79,70,229,0.2), rgba(139,92,246,0.2));transform:scale(1.05)}
+.service-card[draggable="true"]{cursor:move}
+
+/* Collapsible groups */
+.group-toggle{display:inline-block;margin-right:8px;transition:transform 0.3s ease;cursor:pointer;user-select:none}
+.group-toggle.collapsed{transform:rotate(-90deg)}
+.services-grid.collapsed{display:none}
+
+/* Theme selector */
+.theme-selector{position:absolute;top:20px;right:20px}
+.theme-toggle{background:var(--color-card-bg);border:1px solid var(--color-border);color:var(--color-text);padding:8px 12px;border-radius:8px;cursor:pointer;font-size:18px;transition:all 0.3s ease;backdrop-filter:blur(10px)}
+.theme-toggle:hover{background:var(--color-accent);transform:scale(1.05)}
+.theme-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:8px;padding:8px;min-width:160px;display:none;backdrop-filter:blur(15px);box-shadow:0 4px 20px rgba(0,0,0,0.3)}
+.theme-menu.open{display:block}
+.theme-option{padding:10px 14px;cursor:pointer;border-radius:6px;transition:all 0.2s ease;color:var(--color-text)}
+.theme-option:hover{background:var(--color-accent);transform:translateX(4px)}
+.theme-option.active{background:var(--color-accent);font-weight:600}
+
+/* Import/Export controls */
+.import-export-controls{position:absolute;top:20px;left:20px;display:flex;gap:8px}
+.control-btn{background:var(--color-card-bg);border:1px solid var(--color-border);color:var(--color-text);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;transition:all 0.3s ease;backdrop-filter:blur(10px);font-weight:500}
+.control-btn:hover{background:var(--color-accent);transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,70,229,0.3)}
+
+/* Notifications */
+.notification{position:fixed;top:20px;left:50%;transform:translateX(-50%) translateY(-100px);background:var(--color-card-bg);border:1px solid var(--color-border);padding:16px 24px;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.3);backdrop-filter:blur(15px);z-index:1000;opacity:0;transition:all 0.3s ease}
+.notification.show{opacity:1;transform:translateX(-50%) translateY(0)}
+.notification-success{border-color:#10b981;background:rgba(16,185,129,0.2)}
+.notification-error{border-color:#ef4444;background:rgba(239,68,68,0.2)}
+.notification-info{border-color:#3b82f6;background:rgba(59,130,246,0.2)}
+
+/* Modal */
+.modal{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);backdrop-filter:blur(5px);z-index:9999;display:flex;align-items:center;justify-content:center;animation:fadeIn 0.3s ease}
+.modal-content{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:12px;max-width:500px;width:90%;max-height:80vh;overflow:auto;box-shadow:0 10px 40px rgba(0,0,0,0.5);backdrop-filter:blur(20px)}
+.modal-header{padding:20px;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;align-items:center}
+.modal-header h2{margin:0;color:var(--color-text)}
+.modal-close{background:none;border:none;color:var(--color-text-muted);font-size:24px;cursor:pointer;padding:0;width:30px;height:30px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:all 0.2s ease}
+.modal-close:hover{background:var(--color-accent);color:var(--color-text)}
+.modal-body{padding:20px}
+.modal-footer{padding:20px;border-top:1px solid var(--color-border);display:flex;gap:12px;justify-content:flex-end}
+.modal-footer button{padding:10px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:500;transition:all 0.3s ease}
+.btn-save{background:var(--color-accent);color:var(--color-text)}
+.btn-save:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(79,70,229,0.4)}
+.btn-cancel{background:var(--color-border);color:var(--color-text)}
+.btn-cancel:hover{background:var(--color-accent);transform:translateY(-2px)}
+.widget-setting{margin-bottom:16px}
+.widget-setting label{display:flex;align-items:center;gap:8px;cursor:pointer;color:var(--color-text);font-weight:500}
+.widget-setting input[type="checkbox"]{width:18px;height:18px;cursor:pointer}
+.widget-subsetting{margin-top:8px;margin-left:26px;display:flex;flex-direction:column;gap:8px}
+.widget-subsetting input{padding:8px 12px;border-radius:6px;border:1px solid var(--color-border);background:var(--color-secondary);color:var(--color-text);font-size:13px}
+@keyframes fadeIn{from{opacity:0}to{opacity:1}}
+
+/* Widgets */
+.widgets-container{display:flex;gap:16px;margin-top:20px;flex-wrap:wrap;justify-content:center}
+.widget{background:var(--color-card-bg);border:1px solid var(--color-border);border-radius:10px;padding:16px;backdrop-filter:blur(15px);box-shadow:0 4px 12px rgba(0,0,0,0.2);min-width:200px}
+.widget-clock{text-align:center}
+.widget-time{font-size:32px;font-weight:700;color:var(--color-text);font-variant-numeric:tabular-nums;letter-spacing:-1px}
+.widget-date{font-size:13px;color:var(--color-text-muted);margin-top:4px}
+.widget-weather{min-width:220px}
+.weather-info{text-align:center}
+.weather-location{font-size:14px;color:var(--color-text-muted);margin-bottom:8px}
+.weather-temp{font-size:36px;font-weight:700;color:var(--color-text);margin:8px 0}
+.weather-desc{font-size:14px;color:var(--color-text-muted);text-transform:capitalize;margin-bottom:12px}
+.weather-details{display:flex;gap:16px;justify-content:center;font-size:13px;color:var(--color-text-muted)}
+.widget-quote{max-width:400px}
+.quote-text{font-size:15px;font-style:italic;color:var(--color-text);margin:0 0 12px 0;line-height:1.6}
+.quote-author{font-size:13px;color:var(--color-text-muted);text-align:right;margin:0}
+.widget-loading{text-align:center;color:var(--color-text-muted);font-size:14px}
+.widget-error{text-align:center;color:#ef4444;font-size:13px}
+.widget-error a{color:#60a5fa}
+
 @media (max-width:420px){.card{padding:14px;font-size:14px}}
+@media (max-width:768px){.theme-selector,.import-export-controls{position:static;margin:10px auto;justify-content:center}.widgets-container{flex-direction:column;align-items:center}}
+