@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
        body {
            font-family: 'Inter', sans-serif;
            background-color: #f3f4f6; /* Light gray background */
        }
        .task-row.completed td {
            text-decoration: line-through;
            color: #9ca3af; /* Gray-400 */
        }
        .task-row.completed {
            background-color: #f9fafb; /* Gray-50 */
        }
        .task-row {
            position: relative;
        }
        .task-checkbox {
            cursor: pointer;
            width: 1.5rem;
            height: 1.5rem;
            accent-color: #3b82f6; /* Blue-500 */
            flex-shrink: 0;
        }
        .task-checkbox[data-task-type="audio"] {
            accent-color: #16a34a; /* Green-600 */
        }
        th {
            background-color: #f9fafb; /* Gray-50 */
        }
        /* Custom styles */
        .card {
            background-color: white;
            border-radius: 0.75rem;
            box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
            margin-bottom: 2rem;
            overflow: hidden;
        }
        .card-header {
            padding: 1.5rem;
            border-bottom: 1px solid #e5e7eb;
            transition: background-color 0.2s;
            cursor: pointer;
        }
        .group-title {
            cursor: pointer;
            transition: color 0.2s;
            display: inline-block;
        }
        .group-title .checkmark {
            opacity: 0;
            transition: opacity 0.2s;
            color: #16a34a; /* Green-600 */
            margin-left: 0.5rem;
        }
        .group-title.group-completed {
            color: #15803d; /* Green-700 */
        }
        .group-title.group-completed .checkmark {
            opacity: 1;
        }

        .card-header:hover {
            background-color: #f9fafb;
        }
        .card-header h2 { font-size: 1.5rem; font-weight: 700; }
        .card-header h3 { font-size: 1.25rem; font-weight: 600; margin-top: 1rem; }
        .card-header p { color: #6b7280; margin-top: 0.25rem; }
        table { width: 100%; border-collapse: collapse; }
        th, td {
            padding: 1rem 1.5rem;
            text-align: left;
            border-bottom: 1px solid #e5e7eb;
            vertical-align: top;
        }
        td.editable { cursor: cell; }
        td.editable textarea {
            width: 100%;
            height: auto;
            min-height: 80px;
            border: 1px solid #3b82f6;
            border-radius: 0.375rem;
            padding: 0.5rem;
            box-sizing: border-box;
            resize: vertical;
        }
        tbody tr:last-child td { border-bottom: none; }
        .collapsible-content {
            transition: max-height 0.5s ease-in-out;
            max-height: 0;
            overflow: hidden;
        }
        .overflow-x-auto {
            overflow: hidden;
        }
        .chevron.rotate-180 {
             transform: rotate(180deg);
        }
        /* Keyword Tag Styles */
        .tag {
            padding: 0.125rem 0.5rem;
            border-radius: 0.375rem;
            font-weight: 600;
            font-size: 0.875rem;
            white-space: nowrap;
        }
        .tag-huamian { background-color: #dbeafe; color: #1e40af; } /* Blue */
        .tag-caozuo { background-color: #dcfce7; color: #166534; } /* Green */
        .tag-jiangjie { background-color: #ffedd5; color: #9a3412; } /* Orange */
        .tag-shijue { background-color: #f3e8ff; color: #6b21a8; } /* Purple */
        .tag-default { background-color: #e5e7eb; color: #4b5563; } /* Gray */

        /* Speech Phrase Styles */
        .tts-phrase {
            color: #2563eb; /* Blue-600 */
            cursor: pointer;
            border-bottom: 1px dotted #93c5fd; /* Blue-300 */
            transition: color 0.2s, border-color 0.2s;
        }
        .tts-phrase:hover {
            color: #1d4ed8; /* Blue-700 */
            border-bottom-color: #1d4ed8; /* Blue-700 */
        }

        /* Action Buttons for Rows */
        .action-buttons {
            display: flex;
            gap: 0.75rem; /* space-x-3 */
            align-items: center;
            justify-content: center;
        }

        .action-row td {
            padding-top: 0.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid #e5e7eb; /* Keep the line consistent */
        }

        .action-btn {
            cursor: pointer;
            color: #9ca3af; /* gray-400 */
            transition: color 0.2s;
        }

        .action-btn:hover {
            color: #3b82f6; /* blue-500 */
        }
        .action-btn.delete:hover {
            color: #ef4444; /* red-500 */
        }

        /* Sidebar Script List */
        .script-item {
            padding: 0.75rem;
            border-radius: 0.375rem;
            cursor: pointer;
            transition: background-color 0.2s, color 0.2s;
        }

        .script-item:hover {
            background-color: #f3f4f6; /* gray-100 */
        }

        .script-item.active {
            background-color: #dbeafe; /* blue-100 */
            color: #1e40af; /* blue-800 */
            font-weight: 600;
        }

        .script-tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 0.25rem;
            margin-top: 0.25rem;
        }

        .script-tag {
            padding: 0.125rem 0.5rem;
            border-radius: 9999px;
            font-size: 0.75rem;
            font-weight: 500;
            white-space: nowrap;
        }

        /* Status Tag Colors */
        .tag-status-draft {
            background-color: #e5e7eb; /* gray-200 */
            color: #4b5563; /* gray-700 */
        }
        .tag-status-in-progress {
            background-color: #dbeafe; /* blue-100 */
            color: #1e40af; /* blue-800 */
        }
        .tag-status-review {
            background-color: #fef3c7; /* amber-100 */
            color: #92400e; /* amber-800 */
        }
        .tag-status-completed {
            background-color: #dcfce7; /* green-100 */
            color: #166534; /* green-800 */
        }

        /* ID Tag Colors */
        .tag-id-type, .tag-id-number, .tag-id-version {
            background-color: #f3f4f6; /* gray-100 */
            color: #6b7280; /* gray-500 */
        }

        .script-item.active .tag-id-type,
        .script-item.active .tag-id-number,
        .script-item.active .tag-id-version {
            background-color: #c7d2fe; /* indigo-200 */
            color: #3730a3; /* indigo-800 */
        }

        /* Icon Masking for Copyright Footer */
        .icon-mask {
            -webkit-mask-size: contain;
            mask-size: contain;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
            background-color: #9ca3af; /* gray-400 */
            transition: background-color 0.2s ease-in-out;
        }

        .icon-bilibili {
            -webkit-mask-image: url('ico/B.png');
            mask-image: url('ico/B.png');
        }

        a.icon-bilibili:hover {
            background-color: #3b82f6; /* blue-500 */
        }

        /* Sidebar Progress Bar */
        .sidebar-progress-bar-wrapper {
            margin-top: 0.5rem;
            height: 6px;
            width: 100%;
            background-color: #e5e7eb; /* gray-200 */
            border-radius: 9999px;
            overflow: hidden;
        }

        .sidebar-progress-bar {
            height: 100%;
            border-radius: 9999px;
            transition: width 0.5s ease-in-out, background-color 0.5s ease-in-out;
        }

        /* Color Tiers */
        .progress-tier-1 { background-color: #f97316; } /* orange-500 */
        .progress-tier-2 { background-color: #facc15; } /* yellow-400 */
        .progress-tier-3 { background-color: #3b82f6; } /* blue-500 */
        .progress-tier-4 { background-color: #22c55e; } /* green-500 */

        /* Row Action Buttons Hover Effect */
        .task-row .action-buttons {
            opacity: 0;
            transition: opacity 0.15s ease-in-out;
        }

        .task-row:hover .action-buttons {
            opacity: 1;
        }