        :root {
          --bg-color: #121212;
          --text-color: #ffffff;
          --accent-color: #00c483;
          --secondary-bg: #1e1e1e;
          --border-color: #333;
          --highlight-color: #00a9c4;
          --scrollbar-bg: #1a1a1a;
          --scrollbar-thumb: #00c483;
          --snippet-text: #17b8c3;
        }
    
        body.light-mode {
          --bg-color: #ffffff;
          --text-color: #000000;
          --accent-color: #007b5e;
          --secondary-bg: #f4f4f4;
          --border-color: #ccc;
          --highlight-color: #007acc;
          --scrollbar-bg: #e0e0e0;
          --scrollbar-thumb: #007acc;
          --snippet-text: #0d676d;
        }
    
        * {
          box-sizing: border-box;
        }
    
        * {
            scrollbar-width: thin;
            scrollbar-color: #282c34 #000000;
        }
            
    
    
        body {
          margin: 0;
          font-family: "Segoe UI", sans-serif;
          background-color: var(--bg-color);
          color: var(--text-color);
          transition: background-color 0.3s ease, color 0.3s ease;
        }
    
        header {
            position: sticky;
            top: 0px;
            margin-bottom: 10px;
        }
        .snippet-container {
          flex-grow: 1;
          padding: 0;
          background-color: var(--bg-color);
          position: relative;
          width: calc(100% - 1px);
        }
        
        .pre-normal {
          height: calc(100vh - 170px);
        }

        .pre-full {
          height: calc(100vh - 105px);
        }
    
        pre {
          width: 100%;
          overflow: auto;
          background-color: var(--secondary-bg);
          border: 1px solid var(--border-color);
          border-radius: 5px;
          padding: 0;
          box-sizing: border-box;
          margin: 0;
        }
    
        pre code {
          color: var(--text-color);
          font-family: monospace;
          font-size: 14px;
          display: block;
          white-space: pre-wrap;
          word-break: break-word;
          outline: none;
          padding: 10px;
          min-height: 100vh;
        }
    
    
        code[class*="language-"], pre[class*="language-"] {
          color: var(--snippet-text);
          background: none;
          font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
          font-size: 1em;
          text-align: left;
          white-space: pre-wrap;       /* ✅ Wrap long lines */
          word-break: break-word;      /* ✅ Break long words if needed */
          word-spacing: normal;
          line-height: 1.5;
          tab-size: 4;
          hyphens: none;
        }
    
    
        body.light-mode code[class*="language-"] .token.comment,
        body.light-mode code[class*="language-"] .token.prolog,
        body.light-mode code[class*="language-"] .token.doctype,
        body.light-mode code[class*="language-"] .token.cdata {
          color: #6a737d;
          font-style: italic;
        }
    
        body.light-mode code[class*="language-"] .token.punctuation {
          color: #24292e;
        }
    
        body.light-mode code[class*="language-"] .token.namespace {
          opacity: 0.8;
        }
    
        body.light-mode code[class*="language-"] .token.property,
        body.light-mode code[class*="language-"] .token.tag,
        body.light-mode code[class*="language-"] .token.constant,
        body.light-mode code[class*="language-"] .token.symbol,
        body.light-mode code[class*="language-"] .token.deleted {
          color: #d73a49;
        }
    
        body.light-mode code[class*="language-"] .token.boolean,
        body.light-mode code[class*="language-"] .token.number,
        body.light-mode code[class*="language-"] .token.unit {
          color: #005cc5;
        }
    
        body.light-mode code[class*="language-"] .token.selector,
        body.light-mode code[class*="language-"] .token.attr-name,
        body.light-mode code[class*="language-"] .token.string,
        body.light-mode code[class*="language-"] .token.char,
        body.light-mode code[class*="language-"] .token.builtin,
        body.light-mode code[class*="language-"] .token.inserted {
          color: #22863a;
        }
    
        body.light-mode code[class*="language-"] .token.operator,
        body.light-mode code[class*="language-"] .token.entity,
        body.light-mode code[class*="language-"] .token.url,
        body.light-mode code[class*="language-"] .token.variable {
          color: #b31d28;
        }
    
        body.light-mode code[class*="language-"] .token.atrule,
        body.light-mode code[class*="language-"] .token.attr-value,
        body.light-mode code[class*="language-"] .token.function,
        body.light-mode code[class*="language-"] .token.class-name {
          color: #6f42c1;
        }
    
        body.light-mode code[class*="language-"] .token.keyword,
        body.light-mode code[class*="language-"] .token.selector-tag {
          color: #cf222e;
        }
    
        body.light-mode code[class*="language-"] .token.regex,
        body.light-mode code[class*="language-"] .token.important {
          color: #e36209;
        }
    
        body.light-mode code[class*="language-"] .token.bold {
          font-weight: bold;
        }
    
        body.light-mode code[class*="language-"] .token.italic {
          font-style: italic;
        }
    
        body.light-mode code[class*="language-"] .token.entity {
          cursor: help;
        }
    
        body.light-mode code[class*="language-"] .token.placeholder {
          color: #795548;
        }
    
        body.light-mode code[class*="language-"] .token.known-class-name,
        body.light-mode code[class*="language-"] .token.class-name {
          color: #0366d6;
        }
    
        body.light-mode code[class*="language-"] .token.module {
          color: #2f6f9f;
        }
    
        body.light-mode code[class*="language-"] .token.parameter {
          color: #24292e;
        }
    
        body.light-mode code[class*="language-"] .token.string-interpolation {
          color: #032f62;
        }
    
        body.light-mode code[class*="language-"] .token.interpolation-punctuation {
          color: #d73a49;
        }
    
    
        #copy-button {
          position: absolute;
          top: 15px;
          right: 15px;
          padding: 8px 14px;
          background-color: var(--highlight-color);
          color: white;
          border: none;
          border-radius: 5px;
          cursor: pointer;
          font-size: 0.85rem;
          font-weight: bold;
        }
    
        #copy-button:hover {
          opacity: 0.9;
        }
    
        .toggle-theme,
        .copy-id-button {
          padding: 6px 10px;
          background: transparent;
          color: var(--text-color);
          border: 1px solid var(--text-color);
          border-radius: 5px;
          cursor: pointer;
          font-size: 0.8rem;
        }
    
        @media screen and (max-width: 768px) {
          .snippet-container {
            width: 100%;
          }
    
          pre {
            width: 100%;
            height: 100%;
          }
    
          #copy-button {
            top: 10px;
            right: 10px;
          }
        }
