/* General Styles */
        body {
            font-family: 'Inter', sans-serif; /* Using Inter font */
            transition: background-color 0.4s ease, color 0.4s ease;
            padding: 20px;
            margin: 0;
            background-color: #f8fafc; /* Light gray background */
            color: #1f2937; /* Dark gray text */
        }
        a {
            color: #2563eb; /* Blue links */
            text-decoration: none;
            transition: color 0.2s ease;
        }
        a:hover {
            color: #1d4ed8; /* Darker blue on hover */
        }
        h1, h2, h3, h4 {
            color: #111827; /* Very dark gray headings */
            margin-bottom: 0.5em;
        }
        code {
            background-color: #e5e7eb; /* Light gray code background */
            color: #ef4444; /* Red code text */
            padding: 2px 6px;
            border-radius: 4px;
            font-family: monospace;
        }
        hr {
            border: none;
            height: 1px;
            background-color: #6b21a8; /* Purple */
            margin: 20px 0;
        }
        
        /* Dark Mode Styles */
        .dark-mode {
            background-color: #1f2937; /* Dark background */
            color: #f3f4f6; /* Light gray text */
        }
        .dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4 {
            color: #f9fafb; /* Almost white headings */
        }
        .dark-mode a {
            color: #60a5fa; /* Lighter blue links */
        }
        .dark-mode a:hover {
            color: #93c5fd; /* Even lighter blue on hover */
        }
        .dark-mode code {
            background-color: #4b5563; /* Darker gray code background */
            color: #fca5a5; /* Lighter red code text */
        }
        .dark-mode hr {
            background-color: #a855f7; /* Lighter purple */
        }
        .dark-mode .btn {
            background-color: #7e22ce; /* Slightly lighter purple */
        } 
         .dark-mode .btn:hover, 
         .dark-mode .btn:focus {
            background-color: #9333ea; 
         }
        .dark-mode .toggle-label {
            background-color: #4b5563; /* Darker gray toggle background */
        }
        .dark-mode .toggle-checkbox:checked + .toggle-label {
            background-color: #a855f7; /* Purple when checked */
        }
        .dark-mode .toggle-label:after {
            background-color: #d1d5db; /* Lighter gray handle */
        }
        /* Style for the DM text area based on modal inputs */
        .dark-mode textarea, .dark-mode input[type="number"] {
            background-color: #4b5563;
            color: #f3f4f6;
            border-color: #6b7280;
        }
        .dark-mode textarea::placeholder, .dark-mode input[type="number"]::placeholder {
            color: #9ca3af;
        }

        /* --- Custom styles for this page --- */
        .dark-mode #dm-card { 
             background-color: #374151; /* Darker card background */ 
        }
        .dark-mode #status {
            color: #9ca3af; /* text-gray-400 */
        }
        /* --- End custom styles --- */

        /* Button Styles */
        button, .btn { /* Apply .btn styles to standard buttons too */
            color: white;
            background-color: #6b21a8; /* Purple */
            padding: 0.5em 1em;
            border: none;
            border-radius: 6px; /* Rounded corners */
            cursor: pointer;
            font-size: 1rem;
            font-weight: 500; /* Added font-weight */
            transition: background-color 0.2s ease, transform 0.1s ease;
            display: inline-block; /* Ensure buttons behave like inline-blocks */
            margin: 5px; /* Add some margin */
            text-align: center;
        }
        button:hover, .btn:hover,
        button:focus, .btn:focus {
            background-color: #7e22ce; /* Lighter purple on hover/focus */
            outline: none;
        }
        button:active, .btn:active {
            transform: scale(0.98); /* Slight shrink on click */
        }
        button:disabled, .btn:disabled {
             background-color: #9ca3af; /* Gray when disabled */
             cursor: not-allowed;
        }
        
        /* Dark Mode Toggle Styles */
        .toggle-container {
            display: inline-block;
            position: relative;
            vertical-align: middle; /* Align with text/buttons */
        }
        .toggle-checkbox {
            display: none; /* Hide actual checkbox */
        }
        .toggle-label {
            display: block;
            width: 44px; /* Slightly wider */
            height: 24px; /* Slightly taller */
            background-color: #cbd5e1; /* Gray background */
            border-radius: 24px; /* Fully rounded */
            position: relative;
            cursor: pointer;
            transition: background-color 0.3s ease;
        }
        .toggle-label:after {
            content: '';
            display: block;
            width: 20px; /* Circle handle */
            height: 20px;
            background-color: #fff;
            border-radius: 50%;
            position: absolute;
            top: 2px;
            left: 2px;
            transition: left 0.3s ease;
            box-shadow: 0 1px 3px rgba(0,0,0,0.1);
        }
        .toggle-checkbox:checked + .toggle-label {
            background-color: #6b21a8; /* Purple when checked */
        }
        .toggle-checkbox:checked + .toggle-label:after {
            left: 22px; /* Move handle to the right */
        }