@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300&display=swap');    
    
    /* スクロールバーもダーク */
    ::-webkit-scrollbar {
      width: 8px;
      background: #222;
    }
    ::-webkit-scrollbar-thumb {
      background: #444;
      border-radius: 4px;
    }

    .comment-form label {
        display: block;
        margin-top: 15px;
        margin-bottom: 5px;
    }

      
      body {
        background-color: #202124;
        padding-top: 60px;
      }
      
      header{
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: 10px 20px;
        z-index: 5000;
        border-bottom: 1px solid rgba(255,255,255,0.3);
      }

      .header_logo{
        width: 150px;
        height: auto;
      }
      
      .pc-nav ul {
        display: flex;
        list-style: none;
        gap: 25px;
      }
      
      .pc-nav ul li a {
        font-size: 16px;
        color: #ffffff;
        text-decoration: none;
        padding: 8px 12px;
        border-radius: 4px;
        transition: background-color 0.3s ease;
      }
      
      .pc-nav ul li a:hover {
        background-color: rgba(255,255,255,0.2);
      }
      
      .article-container {
          margin-left: 250px;
          width: 95%;
          max-width: 800px;
          margin: 40px auto;
          padding: 20px;
          border: 2px solid #7d7d7d;
          color: #fff;
          border-radius: 10px;
      }
      
      
      .thumbnail {
          width: 100%;
          aspect-ratio: 16 / 9; /* アスペクト比を16:9に設定 */
          object-fit: cover;    /* 画像がコンテナに合わせてトリミングされるようにします */
          border-radius: 6px;
          margin-bottom: 20px;
      }


      p{
        color: #fff;
      }
      
      .headline {
          font-size: 1.2rem;
          color: #fff;
          margin-bottom: 20px;
      }
      
      .body-text {
          line-height: 1.6;
          white-space: pre-wrap; /* 改行を維持 */
          color: #fff;
      }
      
      .body-title {
          font-size: 1.5rem; /* お好みのサイズに調整してください */
          color: #fff;
          margin-top: 30px;
          margin-bottom: 15px;
      }

      .body-title-hr {
          border: none;
          height: 1px;
          background-color: rgba(255, 255, 255, 0.3);
          margin-bottom: 20px;
      }

      /* コードブロックのコンテナ */
      .code-container {
          position: relative;
          margin-top: 20px;
          margin-bottom: 10px;
      }

      /* コードブロックのスタイル */
      .code-block {
          background-color: #2d2d2d; /* 暗い背景色 */
          color: #f8f8f2; /* 明るい文字色 */
          padding: 20px;
          border-radius: 8px;
          overflow-x: auto; /* 横スクロールを有効に */
      }

      /* 折りたたみ可能なコードブロックの初期状態 (10行分) */
      .collapsible .code-block {
          max-height: 15em; /* 10行分の高さ (line-height: 1.5 * 10) */
          overflow-y: hidden;
          border-bottom-left-radius: 0;
          border-bottom-right-radius: 0;
          transition: max-height 0.4s ease-out;
      }

      /* 折りたたみが展開された状態 */
      .collapsible.expanded .code-block {
          max-height: 500em; /* 十分な高さを確保 (約500行分) */
          overflow-y: visible; /* 内容がはみ出るのを許可 */
      }

      /* すべて見る/閉じるボタンのスタイル */
      .toggle-code-btn {
          display: block;
          width: 100%;
          padding: 10px;
          background-color: #444;
          color: #fff;
          border: none;
          cursor: pointer;
          text-align: center;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          transition: background-color 0.3s ease;
      }

      .toggle-code-btn:hover {
          background-color: #555;
      }

      .code-block code {
          font-family: 'Menlo', 'Monaco', 'Consolas', 'Courier New', monospace; /* 等幅フォント */
          font-size: 0.9rem;
          white-space: pre;
          line-height: 1.5; /* 行の高さを指定 */
      }

      /* コピーボタンのスタイル */
      .copy-btn {
          position: absolute;
          top: 10px;
          right: 10px;
          background-color: #555;
          color: #fff;
          border: none;
          padding: 5px 10px;
          border-radius: 5px;
          cursor: pointer;
          opacity: 0; /* 最初は非表示 */
          transition: opacity 0.3s ease;
      }

      .code-container:hover .copy-btn {
          opacity: 0.8;
      }

      .copy-btn:hover {
          opacity: 1;
      }

      /* すべて見る/閉じるボタンのスタイル */
      .toggle-code-btn {
          display: block;
          width: 100%;
          padding: 10px;
          background-color: #444;
          color: #fff;
          border: none;
          cursor: pointer;
          text-align: center;
          border-bottom-left-radius: 8px;
          border-bottom-right-radius: 8px;
          transition: background-color 0.3s ease;
      }
      
      /* 目次のスタイル */
      .toc-container{
        display: none;
      }

      .toc-container-sp {
          background-color: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 30px;
          display: none;
      }

      .toc-container-sp ul {
          list-style-type: none;
          padding-left: 0;
      }
      .toc-container-sp li a {
          color: #a7c5f3;
          text-decoration: none;
          display: block;
          padding: 8px 0;
          transition: background-color 0.2s ease;
      }
      
        h2{
          color: #ffffff;
          margin-bottom: 18px;
          border-left: 6px solid #b9b9b9;
          padding-left: 12px;
          letter-spacing: 2px;
        }

      /* 本文中のメディア（画像・動画・音声）のスタイル */
      .media-image,
      .media-video,
      .media-audio {
          max-width: 100%; /* コンテナ幅に合わせて縮小 */
          height: auto;    /* アスペクト比を維持 */
          display: block;
          margin: 20px 0; /* 左寄せに変更 */
          border-radius: 8px;
      }

      /* 本文中のリンクのスタイル */
      .body-link {
          color: #8ab4f8;
          text-decoration: underline;
      }
      .body-link:hover {
          text-decoration: none;
      }

      /* タグ用ボタンのスタイル */
      .tag-buttons {
          margin-bottom: 20px;
      }
      
      .tag-button {
        display: inline-block;
        margin: 4px 4px 4px 0;
        padding: 6px 14px;
        background: rgba(0, 150, 255, 0.15);
        color: #fff;
        border: 1px solid #2196f3;
        border-radius: 6px;
        cursor: pointer;
        font-size: 0.95em;
        transition: background 0.2s;
        text-decoration: none;
      }
      
      .tag-button:hover {
        background: #2196f3;
        color: #fff;
      }

      .tag-button i {
          margin-right: 5px;
      }

      .article-meta{
        text-align: right;
      }

    footer {
        width: 100%;
        text-align: center;
        padding: 10px 0;
        background-color: #202124;
        border-top: 1px solid rgba(255,255,255,0.3);
        color: rgb(0,0,0);
        position: relative;
        z-index: 6000;
      }

    .bottom-nav {
        position: fixed;
        bottom: 0;
        width: 100%;
        height:30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 15px;
        align-items: center;
        justify-content: space-between;
        background-color: transparent;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
        padding: 10px 25px;
        z-index: 5000;
        border-top: 1px solid rgba(255,255,255,0.3);
    }

    .bottom-nav a {
        color: white;
        text-decoration: none;
        font-size: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        transition: transform 0.2s ease;
    }

    .bottom-nav a:hover {
        transform: scale(1.1);
    }

    .bottom-nav i {
        font-size: 15px;
    }

    .bottom-nav span {
        font-size: 10px;
        margin-top: 4px;
    }

    /* 初期状態ではbottom-navを非表示にする */
    .bottom-nav {
        display: none;
    }

    @media (max-width: 1035px) {
        .bottom-nav {
            display: flex; /* 画面幅700px以下でbottom-navを表示 */
        }
        header .pc-nav {
            display: none; /* 画面幅700px以下でpc-navを非表示 */
        }
        header {
            justify-content: center; /* header内のロゴを中央寄せ */
        }

        .article-container{
            width: 80%;
        }

        .sub_container {
          display: none;
      }

      footer{
        margin-bottom: 60px;
        font-size: 12px;
      }

      .fixed-btn{
        display: none;
      }
      .toc-container-sp {
          background-color: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.2);
          border-radius: 8px;
          padding: 20px;
          margin-bottom: 30px;
      }
      .sidebar-fixed{
        display: none !important;
      }
    }

    /* ハンバーガーボタン（ヘッダーの外） */
    .menu-toggle {
      position: fixed;
      top: 8px;
      right: 35px;
      width: 40px;
      height: 40px;
      z-index: 4000;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      cursor: pointer;
      background: transparent;
    }

    .bar {
      width: 30px;
      height: 4px;
      background: #dbdbdb;
      border-radius: 2px;
      transition: 0.3s ease;
    }

    .menu-toggle.active .bar:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .menu-toggle.active .bar:nth-child(2) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* サイドバー */
    .sidebar {
      position: fixed;
      top: 60px;
      right: -300px;
      width: 250px;
      height: 100vh; /* Changed to viewport height */
      background-color: rgba(0, 0, 0, 0.1); /* 半透明の背景を追加 */
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border-left: 1px solid rgba(255,255,255,0.3);
      transition: right 0.4s ease;
      z-index: 2000;
      padding: 80px 20px 20px;
      box-sizing: border-box; /* Added for better padding and height management */
    }

    .sidebar.active {
      right: 0;
    }

    .sidebar ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    .sidebar ul li {
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      font-size: 18px;
      color: #333;
    }
    .sidebar ul li a{
      padding: 15px 0;
      border-bottom: 1px solid rgba(0,0,0,0.1);
      font-size: 18px;
      color: #ffffff;
      text-decoration:none;
    }

        .container {
            width: 100%;

            max-width: 1000px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 15px;
            color: white;
            border: 2px solid #7d7d7d;
            writing-mode: horizontal-tb;
            text-orientation: mixed;
            /* 横方向のレイアウトを保つ */
            display: block;
        }

      .sub_container {
        width: 250px;
        background: rgba(255,255,255,0.1);
        backdrop-filter: blur(8px);
        padding: 15px;
        border-radius: 10px;
        height: fit-content;
      }

/*検索システム*/
        .highlight {
            font-weight: bold;
            color: #333333;
            background-color: Yellow;
            padding: 3px 5px;
        }



        /*ボタンなどの装飾 - CSS for Buttons and other decorations*/
        /* 入力フィールドのスタイル - Input Field Styles */
        /*input[type="text"] {
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 5px;
            font-size: 16px;
            width: 250px;
            box-sizing: border-box;
            transition: all 0.3s ease;
        }
        */

        input[type="text"]:focus {
            border-color: #007bff;
            box-shadow: 0 0 8px rgba(0, 123, 255, 0.2);
            outline: none;
        }


        /* ブログ記事のカード */

        .blog-card {
            display: flex;
            flex-direction: row; /* 横並びに変更 */
            align-items: center;
            border-bottom: 3px solid #d1d1d1;
            margin: 15px 0; /* 縦に追加されるように上下マージン */
            width: 100%; /* カード全体の幅を確保 */
            max-width: 800px; /* 最大幅を指定 */
            overflow: hidden;
        }


        .blog-card img {
            width: 100px; /* 固定幅 */
            height: auto;
            object-fit: cover;
        }


        .blog-card .content {
          padding: 15px;
          flex: 1; /* タイトル部分を拡張 */
        }


        /* リンクのスタイルを調整 */
        .blog-card a {
            display: block; /* ブロック要素として設定 */
            width: 100%; /* 横幅をカード全体に固定 */
            text-decoration: none; /* 下線を削除 */
            color: inherit; /* 親の文字色を継承 */
        }


        .blog-card h2 {
            margin: 0 0 10px;
            font-size: 1.5rem;
            color: #ffffff;
        }


        .blog-card p {
          text-align: left;
            font-size: 1rem;
            line-height: 1.6;
            color: #ffffff;
            margin: 0;
        }

        
        .blog-card .Group {
            font-size: 1rem;
            line-height: 1.6;
            color: #ffffff;
            margin: 0;
        }

        .blog-card h2 {
        position: relative; /* 必須: ::afterの位置調整に必要 */
        margin: 0 0 10px;
        font-size: 1.5rem;
        color: #ffffff;
        display: inline-block; /* テキスト内容の幅に限定 */
        }

        .blog-card h2::after {
        position: absolute;
        left: 0;
        content: '';
        width: 100%; /* h2のテキスト幅に合わせる */
        height: 2px;
        background: #ffffff; /* アンダーラインの色 */
        bottom: -5px; /* アンダーラインの位置調整 */
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease; /* アニメーションの滑らかさ */
        }

        .blog-card h2:hover::after {
        visibility: visible;
        bottom: 0; /* ホバー時のアンダーライン位置 */
        opacity: 1;
        }
            /*Dev::h2にホバーアニメーションを追加*/


        .container {
            width: 85%;
            max-width: 800px;
            margin: 20px auto;
            padding: 20px;
            border-radius: 15px;
            color: white;
            border: 2px solid #7d7d7d;
            writing-mode: horizontal-tb;
            text-orientation: mixed;
            /* 横方向のレイアウトを保つ */
            display: block;
        }


        .title{
          color: white;
          text-align: center;
        }
    /*記事ここまで*/


        h1{
          color: #ffffff;
          margin-bottom: 18px;
          border-left: 6px solid #b9b9b9;
          padding-left: 12px;
          letter-spacing: 2px;
        }
        .search-container {
        /* position: absolute と関連プロパティを削除します */
        margin-left: auto;   /* Flexアイテムとして左マージンを自動に */
        margin-right: auto;  /* Flexアイテムとして右マージンを自動に */
        width: 60%;          /* 幅は維持 */
        max-width: 500px;    /* 広がりすぎないように最大幅を設定 */
        /* z-index: 1001; は通常Flexアイテムには不要です */
        }

        .search-form {
          display: flex;
          align-items: center;
          border: 2px solid #424242;
          border-radius: 25px;
          overflow: hidden;
          background-color: #424242;
          width: 100%;
          max-width: 600px; /* 推奨：これで横幅制限 */
        }

        .search-box {
          flex: 1;
          border: none;
          outline: none;
          padding: 10px 15px;
          font-size: 16px;
          background-color: transparent;
          color: white;
          min-width: 0; /* ← はみ出し防止 */
        }

        .search-button {
          border: none;
          background-color: #424242;
          padding: 10px 15px;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0; /* ← ボタンの幅を縮めないように */
        }

        .search-button i {
          font-size: 18px;
          color: #888;
        }

        .search-button:hover i {
          color: #000;
        }
        /*検索フォームのデザイン*/
      
        /*トップページへ戻る*/
        html {
            scroll-behavior: smooth;
        }

        #loading {
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 20px;
          font-size: 16px;
          color: #444;
        }

        .spinner {
          width: 40px;
          height: 40px;
          border: 5px solid #ccc;
          border-top-color: #1F2128;
          border-radius: 50%;
          animation: spin 1s linear infinite;
          margin-bottom: 10px;
        }

              /* 共有モーダル */
      .share-modal-container {
          display: none; /* 初期状態は非表示 */
          position: fixed;
          z-index: 6000;
          left: 0;
          top: 0;
          width: 100%;
          height: 100%;
          overflow: auto;
          background-color: rgba(0,0,0,0.6);
          justify-content: center;
          align-items: center;
      }

      .share-modal-content {
          background-color: #2d2d2d;
          color: #fff;
          margin: auto;
          padding: 20px;
          border: 1px solid #888;
          width: 80%;
          max-width: 400px;
          border-radius: 10px;
          position: relative;
          text-align: center;
      }

      .share-modal-close {
          color: #aaa;
          position: absolute;
          top: 10px;
          right: 20px;
          font-size: 28px;
          font-weight: bold;
          cursor: pointer;
      }

      .share-modal-close:hover,
      .share-modal-close:focus {
          color: #fff;
      }

      .share-options {
          display: flex;
          flex-direction: column;
          gap: 15px;
          margin-top: 20px;
      }

      .share-option {
          display: flex;
          align-items: center;
          padding: 12px;
          border-radius: 8px;
          text-decoration: none;
          color: #fff;
          background-color: #444;
          transition: background-color 0.3s;
          border: none;
          font-size: 16px;
          cursor: pointer;
      }
      .share-option i {
          margin-right: 10px;
          width: 20px;
          text-align: center;
      }

      #share-twitter { background-color: #1DA1F2; }
      #share-facebook { background-color: #1877F2; }
      #share-line { background-color: #00B900; }
      #copy-url { background-color: #666; }

      .share-option:hover {
          opacity: 0.9;
      }

    .MutualLink{
      color: #53ACFF;
    }

    .article-container {
    word-wrap: break-word;
    overflow-wrap: break-word;
}
.body-link {
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.sidebar-fixed {
  width: 250px;
  border-right: 1px solid rgba(255,255,255,0.3);
  padding: 32px 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  position: fixed;
  left: 0;
  top: 40;
}
.sidebar-logo {
  display: flex;
  align-items: center;
  margin-bottom: 32px;
}
.sidebar-logo-icon {
  font-size: 2rem;
  margin-right: 8px;
}
.sidebar-logo-text {
  font-size: 1.4rem;
  font-weight: bold;
  color: #222;
}
.sidebar-list {
  list-style: none;
  padding: 0;
  width: 100%;
}
.sidebar-list li {
  margin: 16px 0;
  width: 100%;
}
.sidebar-list a, .sidebar-link-btn {
  display: block;
  color: #333;
  text-decoration: none;
  padding: 10px 32px;
  border-radius: 8px 0 0 8px;
  transition: background 0.2s;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-size: 1rem;
  cursor: pointer;
  box-sizing: border-box;
}
.sidebar-list a:hover, .sidebar-link-btn:hover {
  background: #d1d1d1;
}

      .toc-container-pc ul {
          list-style-type: none;
          padding-left: 0;
      }
      .toc-container-pc li a {
          color: #a7c5f3;
          text-decoration: none;
          display: block;
          padding: 8px 0;
          transition: background-color 0.2s ease;
      }
@media (max-width: 1035px) {
    .toc-container-sp {
        display: block;
    }
}

@media (min-width: 1036px) {
    .toc-container-sp {
        display: none;
    }
}
.main-content {
  margin-left: 250px;
}

@media (max-width: 1035px) {
    .main-content {
        margin-left: 0;
    }
}


/*共通ポップアップスタイル*/
.common-popup {
  display: none; /* Initially hidden */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Center it by default */
  padding: 20px;
  z-index: 10000;
  width: 80%;
  border-radius: 5px;
  /* Default theme (dark) */
  background-color: #2c2c2c;
  color: #f0f0f0;
  border: 1px solid #444;
}

.common-popup h1 {
    color: #f0f0f0; /* Default dark mode */
}

.popup-close-button {
  /* Default theme (dark) */
  background-color: #555;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
}
.popup-close-button:hover {
  background-color: #777; /* Default dark mode hover */
}

/* Light mode for common-popup */
body.light-mode .common-popup {
  background-color: white;
  color: #333;
  border: 1px solid #ccc;
}
body.light-mode .common-popup h1 {
    color: #333;
}
body.light-mode .popup-close-button {
  background-color: #424242; /* Original darkish button on light bg for light mode */
  color: white;
}
body.light-mode .popup-close-button:hover {
  background-color: #666; /* Original hover for light mode */
}


.popup-animation {
  opacity: 0;
  transform: translate(-50%, -60%) scale(0.98);
  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
              transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
  pointer-events: none;
}

.popup-animation.show {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  pointer-events: auto;
}

.tab-bar {
  text-align: center;
  position: relative;
}

.tab-underline {
  position: absolute;
  bottom: 0;
  height: 3px;
  background-color: #3a8df9;
  transition: left 0.3s ease, width 0.3s ease;
  border-radius: 2px;
}
  
.tab-content {
  font-size: 1rem;
  /* Default dark mode */
  color: #ddd;
  background: #3a3a3a;
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  /* --- */
  padding: 15px;
  border-radius: 10px;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  display: none;
}

.tab-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
}


.tab-button {
  background: none;
  border: none;
  /* Default dark mode */
  color: #ccc;
  /* --- */
  padding: 15px 20px;
  font-size: 16px;
  cursor: pointer;
  position: relative;
  transition: color 0.2s ease;
}

.tab-button.active {
  /* Default dark mode */
  color: #fff;
  /* --- */
}

.tab-button.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 25%;
  width: 50%;
  height: 1px;
  background-color: #3a8df9; /* 青いアンダーライン */
  border-radius: 2px;
  transition: all 0.3s ease;
}

.tab-button:hover {
  /* Default dark mode */
  color: #fff;
  /* --- */
}

/* Light mode for tabs */
body.light-mode .tab-button {
  color: rgb(0, 0, 0); /* Original color */
}

body.light-mode .tab-button.active {
  color: #000000; /* Original color */
}

body.light-mode .tab-button.active::after {
  background-color: #3a8df9; /* Original color */
}

body.light-mode .tab-content {
  font-size: 1rem;
  color: #222; /* Original color */
  background: #f8f8f8; /* Original color */
  box-shadow: 0 0 10px rgba(0,0,0,0.1); /* Original shadow */
}


/* .common-popup, .popup-animation, .popup-close-button は上記の「使用方法ポップアップ」のCSSを参照 */

/* 固定ボタンのスタイル */
.fixed-btn {
    position: fixed;
    bottom: 20px;
    /* ↓ 最初のボタンのデフォルト位置（左側） */
    right: 60px; 
    padding: 10px 15px;
    background-color: #7d7d7d;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-size: 16px;
    font-weight: bold;
    transition: background 0.3s;
    z-index: 7000; /* 他の要素より手前に表示されるように念のため指定 */
}

.fixed-btn:hover {
    background-color: #717171;
}

/* 2つ目以降の .fixed-btn の位置を調整（右側） */
.fixed-btn + .fixed-btn {
    right: 5px; 
}

.bp_icon_i{
  width: 15px;
  height: auto;
}

/* Theme Toggle Switch Styles */
.theme-switch-container {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Aligns text to left, switch to right */
  padding: 5px 0; /* Optional padding */
}

.theme-switch-label {
  margin-right: 10px; /* Space between text and switch */
  font-size: 1em; /* Adjust as needed */
}

.theme-switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Smaller width */
  height: 28px; /* Smaller height */
}

.theme-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #555; /* Default: Dark mode track (toggle OFF) */
  transition: .4s;
  border-radius: 28px; /* Rounded track */
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Smaller handle */
  width: 20px;  /* Smaller handle */
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%; /* Rounded handle */
}

input:checked + .slider {
  background-color: #ccc; /* Light mode track (toggle ON) */
}

input:focus + .slider {
  box-shadow: 0 0 1px #ccc; /* Optional focus */
}

input:checked + .slider:before {
  transform: translateX(22px); /* Adjust translation distance */
}