body {
            font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
          }
          
          /* Custom z-index for modal layering */
          .z-60 {
            z-index: 60;
          }
          
          .grid-cell {
            aspect-ratio: 1;
            border-radius: 0.25rem;
            transition: all 0.3s ease;
            cursor: pointer;
            border: 2px solid transparent;
            min-width: 0; /* Prevent flex items from overflowing */
          }
          
          /* Mobile adjustments */
          @media (max-width: 640px) {
            .grid-cell {
              border-width: 1px;
            }
          }
          .grid-cell:hover {
            transform: scale(1.05);
            border-color: rgba(59, 130, 246, 0.5);
          }
          .grid-cell.completed {
            opacity: 1;
          }
          .grid-cell.empty {
            background: #f3f4f6;
            opacity: 0.3;
          }
          
          /* Multi-task cell styling */
          .grid-cell.multi-task-cell {
            position: relative;
            border: 2px solid rgba(255, 255, 255, 0.5);
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2), 0 0 8px rgba(59, 130, 246, 0.4);
          }
          .grid-cell.multi-task-cell::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, transparent 45%, rgba(255, 255, 255, 0.3) 50%, transparent 55%);
            pointer-events: none;
          }
          .multi-task-badge {
            position: absolute;
            top: 2px;
            right: 2px;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            font-size: 10px;
            font-weight: bold;
            padding: 2px 4px;
            border-radius: 4px;
            pointer-events: none;
          }
          
          .timer-ring {
            transition: stroke-dashoffset 1s linear;
          }
          .task-card {
            transition: all 0.2s ease;
          }
          .task-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
          }
          @keyframes fillCell {
            0% { transform: scale(0); opacity: 0; }
            50% { transform: scale(1.2); }
            100% { transform: scale(1); opacity: 1; }
          }
          .cell-fill-animation {
            animation: fillCell 0.5s ease-out;
          }
          
          /* Theme variables with defaults */
          :root {
            --theme-primary: #3B82F6;
            --theme-secondary: #2563EB;
            --theme-accent: #60A5FA;
            --theme-gradient-start: #3B82F6;
            --theme-gradient-end: #2563EB;
          }
          
          /* Dark mode */
          /* Dark Mode Styles */
          body.dark-mode {
            background: #111827;
            color: #F9FAFB;
          }
          
          /* Backgrounds */
          body.dark-mode .bg-white {
            background: #1F2937 !important;
          }
          body.dark-mode .bg-gray-50 {
            background: #111827 !important;
          }
          body.dark-mode .bg-gray-100 {
            background: #1F2937 !important;
          }
          body.dark-mode .bg-gray-200 {
            background: #374151 !important;
          }
          
          /* Text Colors */
          body.dark-mode .text-gray-800,
          body.dark-mode .text-gray-900 {
            color: #F9FAFB !important;
          }
          body.dark-mode .text-gray-700 {
            color: #E5E7EB !important;
          }
          body.dark-mode .text-gray-600 {
            color: #D1D5DB !important;
          }
          body.dark-mode .text-gray-500 {
            color: #9CA3AF !important;
          }
          body.dark-mode .text-gray-400 {
            color: #6B7280 !important;
          }
          
          /* Borders */
          body.dark-mode .border-gray-200,
          body.dark-mode .border-gray-300 {
            border-color: #374151 !important;
          }
          
          /* Cards and Containers */
          body.dark-mode .shadow-md,
          body.dark-mode .shadow-lg,
          body.dark-mode .shadow-xl,
          body.dark-mode .shadow-2xl {
            box-shadow: 0 0 20px rgba(0, 0, 0, 0.5) !important;
          }
          
          /* Buttons */
          body.dark-mode button.bg-gray-200 {
            background: #374151 !important;
            color: #E5E7EB !important;
          }
          body.dark-mode button.bg-gray-200:hover {
            background: #4B5563 !important;
          }

          /* Quick selection buttons (export / AI analysis) */
          .quick-btn {
            background: #f3f4f6; /* light neutral */
            color: #111827;
            border: 1px solid rgba(0,0,0,0.06);
          }
          .quick-btn:hover {
            background: #eef2ff;
            color: #1e40af;
          }

          body.dark-mode .quick-btn {
            background: #374151 !important; /* slightly lighter than modal bg */
            color: #E5E7EB !important;
            border: 1px solid #4B5563 !important;
          }
          body.dark-mode .quick-btn:hover {
            background: #4b5563 !important;
            color: #F9FAFB !important;
          }

          /* Export modal: ensure export option labels have sufficient contrast
             when buttons use light pastel backgrounds (CSV/JSON/PNG cards). */
          #export-modal .bg-green-50 .font-bold,
          #export-modal .bg-green-50 .text-xs {
            color: #064E3B !important; /* dark green for readability */
          }


          #export-modal .bg-purple-50 .font-bold,
          #export-modal .bg-purple-50 .text-xs {
            color: #4C1D95 !important; /* dark purple */
          }

          /* Also ensure the icon colors remain visible in dark-mode */
          body.dark-mode #export-modal .text-green-600 { color: #34D399 !important; }
          body.dark-mode #export-modal .text-purple-600 { color: #A78BFA !important; }
          
          /* Input fields */
          body.dark-mode input,
          body.dark-mode select,
          body.dark-mode textarea {
            background: #374151 !important;
            color: #F9FAFB !important;
            border-color: #4B5563 !important;
          }
          body.dark-mode input::placeholder {
            color: #9CA3AF !important;
          }
          
          /* Grid cells */
          body.dark-mode .grid-cell.empty {
            background: #1F2937 !important;
            border-color: #374151 !important;
          }
          
          /* Task cards */
          body.dark-mode .task-card {
            background: #1F2937 !important;
            /* Do not force border-color in dark mode so task-specific colors
               (set via inline style) remain visible. Overriding with
               !important made all labels look identical in dark mode. */
          }
          body.dark-mode .task-card:hover {
            background: #374151 !important;
          }
          
          /* Modals */
          body.dark-mode .modal-content,
          body.dark-mode #settings-modal > div,
          body.dark-mode #task-modal > div,
          body.dark-mode #reflection-modal > div,
          body.dark-mode #timer-modal > div {
            background: #1F2937 !important;
          }
          
          /* Special text colors that should remain visible */
          body.dark-mode .text-blue-600,
          body.dark-mode .text-blue-500 {
            color: #60A5FA !important;
          }
          body.dark-mode .text-green-600,
          body.dark-mode .text-green-500 {
            color: #34D399 !important;
          }
          body.dark-mode .text-red-600,
          body.dark-mode .text-red-500 {
            color: #F87171 !important;
          }
          body.dark-mode .text-yellow-600,
          body.dark-mode .text-yellow-700 {
            color: #FBBF24 !important;
          }
          body.dark-mode .text-purple-600,
          body.dark-mode .text-purple-500 {
            color: #A78BFA !important;
          }
          
          /* Header */
          body.dark-mode header {
            background: #1F2937 !important;
            border-color: #374151 !important;
          }
          
          /* Stats badges */
          body.dark-mode .bg-blue-100 {
            background: #1E3A8A !important;
          }
          body.dark-mode .text-blue-700 {
            color: #93C5FD !important;
          }
          body.dark-mode .bg-green-100 {
            background: #065F46 !important;
          }
          body.dark-mode .text-green-700 {
            color: #6EE7B7 !important;
          }
          body.dark-mode .bg-yellow-100 {
            background: #78350F !important;
          }
          body.dark-mode .text-yellow-700 {
            color: #FCD34D !important;
          }
          
          /* AI Analysis Modal */
          body.dark-mode .from-purple-50 {
            background: #312E81 !important;
          }
          body.dark-mode .to-pink-50 {
            background: #831843 !important;
          }
          body.dark-mode .bg-blue-50 {
            background: #1E3A8A !important;
          }
          body.dark-mode .text-purple-900 {
            color: #DDD6FE !important;
          }
          body.dark-mode .text-blue-900 {
            color: #BFDBFE !important;
          }
          body.dark-mode .border-purple-200 {
            border-color: #6B21A8 !important;
          }
          
          /* Premium modal - keep dark text on yellow background */
          body.dark-mode #premium-modal .text-gray-800,
          body.dark-mode #premium-modal .text-gray-900 {
            color: #1F2937 !important;
          }
          body.dark-mode #premium-modal .text-gray-700 {
            color: #374151 !important;
          }
          body.dark-mode #premium-modal .text-gray-600 {
            color: #4B5563 !important;
          }
          body.dark-mode #premium-modal .bg-white {
            background: #FFFFFF !important;
          }
          
          /* Premium modal buttons - "後で" button needs proper contrast */
          body.dark-mode #premium-modal button.bg-gray-200 {
            background: #374151 !important;
            color: #E5E7EB !important;
          }
          body.dark-mode #premium-modal button.bg-gray-200:hover {
            background: #4B5563 !important;
          }
          
          /* Settings modal - premium banner (yellow background) */
          body.dark-mode #subscription-banner .bg-gradient-to-r {
            /* Keep gradient backgrounds as-is */
          }
          body.dark-mode #subscription-banner .text-gray-800,
          body.dark-mode #subscription-banner .text-gray-900 {
            color: #1F2937 !important;  /* Dark text on yellow bg */
          }
          body.dark-mode #subscription-banner .text-gray-600 {
            color: #4B5563 !important;  /* Medium dark text */
          }
          body.dark-mode #subscription-banner .text-gray-700 {
            color: #374151 !important;
          }
          body.dark-mode #subscription-banner .bg-white {
            background: #FFFFFF !important;  /* Keep white buttons white */
          }
          body.dark-mode #subscription-banner .text-yellow-700 {
            color: #92400E !important;  /* Darker yellow for button text */
          }
          body.dark-mode #subscription-banner .text-green-600 {
            color: #059669 !important;  /* Darker green for active status */
          }
          
          /* Stats numbers in header - ensure high visibility in dark mode */
          body.dark-mode #today-cells,
          body.dark-mode #today-cells-mobile,
          body.dark-mode #total-minutes,
          body.dark-mode #total-minutes-mobile,
          body.dark-mode #carryover-minutes {
            color: #93C5FD !important;  /* Bright blue for better contrast on dark background */
          }
          
          /* Cancel confirmation modal - yellow info box */
          body.dark-mode .bg-yellow-50 {
            background: #78350F !important;  /* Dark yellow/orange background */
          }
          body.dark-mode .border-yellow-200 {
            border-color: #92400E !important;
          }
          body.dark-mode .text-yellow-600 {
            color: #FCD34D !important;  /* Bright yellow icon */
          }
          
          /* Settings modal - selected state for theme mode and grid patterns */
          body.dark-mode .bg-blue-50 {
            background: #1E3A8A !important;  /* Dark blue for selected state */
          }
          body.dark-mode .border-blue-500 {
            border-color: #3B82F6 !important;  /* Bright blue border */
          }
          body.dark-mode .hover\:border-blue-500:hover {
            border-color: #3B82F6 !important;
          }
          body.dark-mode .hover\:border-blue-300:hover {
            border-color: #60A5FA !important;
          }
          
          /* Account section in dark mode */
          body.dark-mode #account-section .from-blue-50 {
            background: linear-gradient(to bottom right, #1E3A8A, #312E81) !important;
          }
          body.dark-mode #account-section .border-blue-200 {
            border-color: #3B82F6 !important;
          }
          body.dark-mode #account-section .text-gray-600,
          body.dark-mode #account-section .text-gray-700 {
            color: #D1D5DB !important;
          }
          body.dark-mode #account-section .text-gray-800 {
            color: #F3F4F6 !important;
          }
          body.dark-mode #account-section .border-gray-200 {
            border-color: #4B5563 !important;
          }
          body.dark-mode #account-section .bg-gray-50 {
            background: #374151 !important;
          }
          body.dark-mode #account-section .text-gray-500 {
            color: #9CA3AF !important;
          }
          
          /* Date indicator in dark mode */
          body.dark-mode #date-indicator {
            color: #93C5FD !important;
          }
          
          /* Grid patterns - Light mode */
          .grid-dots .grid-cell.empty {
            position: relative;
            background-color: transparent;
            border: none;
            opacity: 0.3;
          }
          
          .grid-dots .grid-cell.empty::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 100%;
            height: 100%;
            background-color: #D1D5DB;
            border-radius: 50%;
          }
          
          .grid-dots .grid-cell.completed {
            position: relative;
            border: none;
            border-radius: 50%;
          }
          
          .grid-dots .grid-cell.completed::after {
            display: none;
          }
          
          .grid-stripes .grid-cell.empty {
            background-image: repeating-linear-gradient(
              45deg,
              #F3F4F6,
              #F3F4F6 5px,
              #E5E7EB 5px,
              #E5E7EB 10px
            );
          }
          
          .grid-stripes .grid-cell.completed {
            background-image: repeating-linear-gradient(
              45deg,
              rgba(255, 255, 255, 0.15),
              rgba(255, 255, 255, 0.15) 5px,
              rgba(0, 0, 0, 0.1) 5px,
              rgba(0, 0, 0, 0.1) 10px
            );
          }
          
          .grid-gradient .grid-cell.empty {
            background: linear-gradient(135deg, #F3F4F6 0%, #E5E7EB 100%);
          }
          
          .grid-gradient .grid-cell.completed {
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, rgba(0, 0, 0, 0.15) 100%);
          }
          
          /* PNG Image Patterns (heart, flower, paw, star) - Display like dots pattern */
          
          /* Empty cells - show pattern shape in gray, like dots */
          .grid-heart .grid-cell.empty,
          .grid-flower .grid-cell.empty,
          .grid-paw .grid-cell.empty,
          .grid-star .grid-cell.empty {
            position: relative;
            background-color: transparent;
            border: none;
            opacity: 0.3;
          }
          
          /* Empty cells show gray pattern shape */
          .grid-heart .grid-cell.empty::after,
          .grid-flower .grid-cell.empty::after,
          .grid-paw .grid-cell.empty::after,
          .grid-star .grid-cell.empty::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: #D1D5DB;
            pointer-events: none;
          }
          
          /* Heart pattern - empty cells as gray hearts */
          .grid-heart .grid-cell.empty::after {
            -webkit-mask-image: url('/static/patterns/pattern-heart.png');
            mask-image: url('/static/patterns/pattern-heart.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Flower pattern - empty cells as gray flowers */
          .grid-flower .grid-cell.empty::after {
            -webkit-mask-image: url('/static/patterns/pattern-flower.png');
            mask-image: url('/static/patterns/pattern-flower.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Paw pattern - empty cells as gray paws */
          .grid-paw .grid-cell.empty::after {
            -webkit-mask-image: url('/static/patterns/pattern-paw.png');
            mask-image: url('/static/patterns/pattern-paw.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Star pattern - empty cells as gray stars */
          .grid-star .grid-cell.empty::after {
            -webkit-mask-image: url('/static/patterns/pattern-star.png');
            mask-image: url('/static/patterns/pattern-star.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Completed cells - no border, pattern shape with task color */
          .grid-heart .grid-cell.completed,
          .grid-flower .grid-cell.completed,
          .grid-paw .grid-cell.completed,
          .grid-star .grid-cell.completed {
            position: relative;
            border: none;
            background-color: transparent !important;
          }
          
          /* Completed cells show colored pattern shape */
          .grid-heart .grid-cell.completed::after,
          .grid-flower .grid-cell.completed::after,
          .grid-paw .grid-cell.completed::after,
          .grid-star .grid-cell.completed::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: currentColor;
            pointer-events: none;
          }
          
          /* Heart pattern - completed cells with task color */
          .grid-heart .grid-cell.completed::after {
            -webkit-mask-image: url('/static/patterns/pattern-heart.png');
            mask-image: url('/static/patterns/pattern-heart.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Flower pattern - completed cells with task color */
          .grid-flower .grid-cell.completed::after {
            -webkit-mask-image: url('/static/patterns/pattern-flower.png');
            mask-image: url('/static/patterns/pattern-flower.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Paw pattern - completed cells with task color */
          .grid-paw .grid-cell.completed::after {
            -webkit-mask-image: url('/static/patterns/pattern-paw.png');
            mask-image: url('/static/patterns/pattern-paw.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Star pattern - completed cells with task color */
          .grid-star .grid-cell.completed::after {
            -webkit-mask-image: url('/static/patterns/pattern-star.png');
            mask-image: url('/static/patterns/pattern-star.png');
            -webkit-mask-size: cover;
            mask-size: cover;
            -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
            -webkit-mask-position: center;
            mask-position: center;
          }
          
          /* Grid patterns - Dark mode */
          body.dark-mode .grid-dots .grid-cell.empty::after {
            background-color: #6B7280;
          }
          
          body.dark-mode .grid-dots .grid-cell.completed {
            opacity: 1;
          }
          
          body.dark-mode .grid-stripes .grid-cell.empty {
            background-image: repeating-linear-gradient(
              45deg,
              #374151,
              #374151 5px,
              #4B5563 5px,
              #4B5563 10px
            );
          }
          
          body.dark-mode .grid-stripes .grid-cell.completed {
            background-image: repeating-linear-gradient(
              45deg,
              rgba(255, 255, 255, 0.1),
              rgba(255, 255, 255, 0.1) 5px,
              rgba(0, 0, 0, 0.2) 5px,
              rgba(0, 0, 0, 0.2) 10px
            );
          }
          
          body.dark-mode .grid-gradient .grid-cell.empty {
            background: linear-gradient(135deg, #374151 0%, #4B5563 100%);
          }
          
          body.dark-mode .grid-gradient .grid-cell.completed {
            background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(0, 0, 0, 0.25) 100%);
          }
          
          /* PNG Image Patterns - Dark mode */
          body.dark-mode .grid-heart .grid-cell.empty::after,
          body.dark-mode .grid-flower .grid-cell.empty::after,
          body.dark-mode .grid-paw .grid-cell.empty::after,
          body.dark-mode .grid-star .grid-cell.empty::after {
            background-color: #6B7280;
          }
          
          body.dark-mode .grid-heart .grid-cell.completed,
          body.dark-mode .grid-flower .grid-cell.completed,
          body.dark-mode .grid-paw .grid-cell.completed,
          body.dark-mode .grid-star .grid-cell.completed {
            opacity: 1;
          }
          
          /* Custom pattern support - uses ::before for tiled overlay */
          .grid-cell.completed[data-pattern]::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-size: 50% 50%;
            background-position: center;
            background-repeat: repeat;
            opacity: 0.5;
            pointer-events: none;
          }
          
          /* Pattern image URLs */
          .grid-cell.completed[data-pattern="heart"]::before {
            background-image: url('/patterns/heart.png');
          }
          
          .grid-cell.completed[data-pattern="flower"]::before {
            background-image: url('/patterns/flower.png');
          }
          
          .grid-cell.completed[data-pattern="paw"]::before {
            background-image: url('/patterns/paw.png');
          }
          
          .grid-cell.completed[data-pattern="star"]::before {
            background-image: url('/patterns/star.png');
          }
          
          /* Dark mode adjustments for custom patterns */
          body.dark-mode .grid-cell.completed[data-pattern]::before {
            opacity: 0.7;
            filter: brightness(1.2);
          }
          
          /* Dark mode for task log */
          body.dark-mode #task-log .bg-gray-50 {
            background-color: #374151;
          }
          
          body.dark-mode #task-log .bg-gray-50:hover {
            background-color: #4B5563;
          }
          
          body.dark-mode #task-log .text-gray-800 {
            color: #E5E7EB;
          }
          
          body.dark-mode #task-log .text-gray-700 {
            color: #D1D5DB;
          }
          
          body.dark-mode #task-log .text-gray-500 {
            color: #9CA3AF;
          }
          
          body.dark-mode #task-log .border-gray-200 {
            border-color: #4B5563;
          }
          
          /* Theme color applications - NO HARDCODED COLORS */
          .app-logo {
            background: linear-gradient(135deg, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
          }
          
          .bg-blue-500,
          button.bg-blue-500 {
            background-color: var(--theme-primary) !important;
          }
          
          button.bg-blue-500:hover {
            background-color: var(--theme-secondary) !important;
          }
          
          .text-blue-600,
          .text-blue-500 {
            color: var(--theme-primary) !important;
          }
          
          .border-blue-500 {
            border-color: var(--theme-primary) !important;
          }
          
          .bg-gradient-to-r.from-blue-500.to-purple-500 {
            background: linear-gradient(to right, var(--theme-gradient-start), var(--theme-gradient-end)) !important;
          }
          
          .from-blue-600:hover {
            background: linear-gradient(to right, var(--theme-secondary), var(--theme-gradient-end)) !important;
          }
          
          /* Stats badges - always visible in both light and dark modes */
          #today-cells, #today-cells-mobile {
            color: #3B82F6 !important;  /* Always blue in light mode */
          }
          
          #total-minutes, #total-minutes-mobile {
            color: #10B981 !important;  /* Always green in light mode */
          }
          
          #carryover-minutes {
            color: #9333EA !important;  /* Purple for carryover time */
          }
          
          .fa-check-square {
            color: #3B82F6 !important;
          }
          
          .fa-clock {
            color: #10B981 !important;
          }
          
          .fa-history {
            color: #9333EA !important;
          }