.code-block-wrapper{position:relative;margin:1.5rem 0;background:var(--code-bg);border:1px solid var(--code-border);border-radius:12px;overflow:hidden;box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.05);transition:all .2s ease;width:100%;max-width:720px}.code-block-wrapper:hover{box-shadow:0 10px 15px -3px rgba(0,0,0,.15),0 4px 6px -4px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.05);transform:translateY(-1px)}.code-block-wrapper .code-header{display:flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.8em;font-weight:500;letter-spacing:.02em;color:var(--code-text);opacity:.7;padding:12px 16px;background:linear-gradient(180deg,rgba(255,255,255,.03),transparent);border-bottom:1px solid var(--code-border)}.code-block-wrapper .code-header:before{content:"";display:inline-flex;width:52px;height:12px;background-image:radial-gradient(circle,#ff5f56 5px,transparent 0),radial-gradient(circle,#ffbd2e 5px,transparent 0),radial-gradient(circle,#27ca40 5px,transparent 0);background-size:12px 12px;background-position:0 0,18px 0,36px 0;background-repeat:no-repeat;opacity:.8;margin-right:8px}.code-content{margin:0;padding:20px;overflow-x:auto;font-family:var(--font-mono);font-size:.875em;line-height:1.7;color:var(--code-text);background:var(--code-bg);tab-size:2}.code-content::-webkit-scrollbar{height:8px}.code-content::-webkit-scrollbar-track{background:rgba(255,255,255,.05);border-radius:4px}.code-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,.15);border-radius:4px}.code-content::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.25)}.code-content code{font-family:inherit;color:inherit;background:none;border:none;padding:0;white-space:pre}.copy-button{position:absolute;top:10px;right:10px;padding:12px 16px;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);border-radius:6px;color:#ffffff;font-size:1rem;font-weight:500;font-family:var(--font-mono);cursor:pointer;transition:all .15s ease;z-index:10;opacity:.9;transform:translateY(0);min-height:44px;min-width:44px}.code-block-wrapper:hover .copy-button{opacity:1;transform:translateY(0)}.copy-button:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.2)}.copy-button:active{transform:scale(.97)}.code-block-wrapper:has(.code-header) .copy-button{top:8px}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#5c6370;font-style:italic}.token.punctuation{color:#abb2bf}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#996515}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#6a9e5a}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#2d7a86}.token.atrule,.token.attr-value,.token.keyword{color:#7d3c98}.token.class-name,.token.function{color:#2e6ba8}.token.important,.token.regex,.token.variable{color:#d19a66}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}.language-json .token.property{color:#61afef}.language-json .token.string{color:#98c379}.language-json .token.number{color:#d19a66}.language-bash .token.function{color:#61afef}.language-bash .token.parameter{color:#e5c07b}@media (max-width:640px){.code-block-wrapper{border-radius:8px;margin:1rem 0}.code-content{padding:16px;font-size:1em}.copy-button{opacity:.7;transform:translateY(0);padding:10px 12px;font-size:1rem;min-height:44px;min-width:44px}}