body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        background: #f9fafb;
      }

      .container-box {
        background: #fff;
        border-radius: 16px;
        padding: 2rem;
        margin: 1rem auto;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
      }

      textarea {
        border-radius: 12px !important;
        resize: vertical;
      }

      .logo{
        width: 50px;
        height: 50px;
      }

      .output-box {
        border: 1px solid #ddd;
        border-radius: 12px;
        min-height: 120px;
        padding: 1rem;
        background: #fefefe;
        white-space: pre-wrap;
      }

      /* Dark mode */
      body.dark {
        background: #1e1e1e;
        color: #eee;
      }

      body.dark .container-box {
        background: #2c2c2c;
        color: #eee;
      }

      body.dark textarea,
      body.dark .output-box {
        background: #333;
        color: #fff;
        border-color: #555;
      }

      /* Toggle switch */
      .switch {
        position: relative;
        display: inline-block;
        width: 50px;
        height: 26px;
      }

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

      .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #ccc;
        transition: 0.4s;
        border-radius: 34px;
      }

      .slider:before {
        position: absolute;
        content: "";
        height: 20px;
        width: 20px;
        left: 3px;
        bottom: 3px;
        background-color: white;
        transition: 0.4s;
        border-radius: 50%;
      }

      .switch input:checked + .slider {
        background-color: #4caf50;
      }

      .switch input:checked + .slider:before {
        transform: translateX(24px);
      }

      h1 { font-size:1.8rem; margin-bottom:10px; color:#111; }
    .meta { color:#666; font-size:0.9rem; margin-bottom:18px; }
    img.hero { width:100%; border-radius:8px; margin-bottom:16px; }
    h2 { margin-top:20px; color:#0b63c5; }
    pre { background:#f4f6f8; padding:12px; border-radius:6px; overflow:auto; }
    ul { margin-left:1.2rem; }
    .cta { margin-top:24px; padding:12px; background:#eef6ff; border-left:4px solid #4cafef; border-radius:6px; }
    footer.blog-foot { margin-top:32px; color:#666; font-size:0.9rem; }

  .italic-text {
  font-style: italic;
}