:root{--code-base-size: 1rem;--code-line-height: calc(var(--code-base-size) * 1.6);--code-ui-size: calc(var(--code-base-size) * .85)}.code-box{background:#0b1220;border-radius:.75rem;overflow:hidden;border:1px solid rgba(255,255,255,.1);margin:1.5rem 0}.code-box,.code-box *{font-family:ui-monospace,monospace}.code-header{display:flex;justify-content:space-between;align-items:center;padding:calc(var(--code-base-size) * .625) calc(var(--code-base-size) * 1);background:#ffffff08;border-bottom:1px solid rgba(255,255,255,.05)}.file-info{display:flex;gap:.625rem}.file-icon{font-size:calc(var(--code-ui-size) * .8);font-weight:600;color:#38bdf8;background:#38bdf81a;padding:calc(var(--code-base-size)*.2) calc(var(--code-base-size)*.45);border-radius:.25rem;letter-spacing:.03125rem}.code-tabs{display:flex;gap:.625rem;overflow:auto}.code-tab{font-size:calc(var(--code-ui-size) * .8);font-weight:600;padding:calc(var(--code-base-size)*.2) calc(var(--code-base-size)*.45);border-radius:.25rem;letter-spacing:.03125rem;color:#9fb4d9;cursor:pointer;transition:all .18s ease}.code-tab.active{color:#38bdf8;background:#38bdf81a}.code-tab:not(.active):hover{background:#ffffff0f;color:#cbd5f5}.code-tab-content{display:none}.code-tab-content.active{display:block}.file-path{font-size:var(--code-ui-size);color:#94a3b8;letter-spacing:.025rem}.copy-path-btn{display:flex;align-items:center;justify-content:center;background:transparent;border:none;color:#64748b;cursor:pointer;padding:.25rem;border-radius:.25rem;transition:all .2s ease}.copy-path-btn:hover{color:#e2e8f0;background:#ffffff1a}.copy-btn{background:#ffffff0a;border:1px solid rgba(255,255,255,.08);padding:calc(var(--code-base-size)*.3) calc(var(--code-base-size)*.65);font-size:var(--code-ui-size);border-radius:.45rem;color:#cbd5f5;transition:all .15s ease}.copy-btn:hover{color:#eee;background:#ffffff16}.code-wrapper{display:flex;overflow:auto;max-height:28rem;position:relative;background:#0b1220}.line-numbers{background:#0f172a;padding:.875rem .25rem .875rem .75rem;text-align:right;color:#475569;border-right:1px solid rgba(255,255,255,.1);-webkit-user-select:none;user-select:none;position:sticky;left:0;top:0;height:100%;align-self:flex-start;z-index:20;min-width:3.5rem}.line-number-row{height:var(--code-line-height);font-size:var(--code-ui-size);display:flex;justify-content:flex-end;align-items:center;gap:.5rem}.line-number-row .fold-zone{width:1rem;display:flex;justify-content:center;align-items:center}.code-content{flex:1;padding:.875rem 1rem;font-size:var(--code-base-size);min-width:max-content}.code-line{display:flex;align-items:center;font-size:var(--code-base-size);height:var(--code-line-height)}.code-text{white-space:pre;flex:1}.fold-toggle{cursor:pointer;display:flex;align-items:center;color:#64748b;transition:color .2s}.fold-toggle:hover{color:#38bdf8}.fold-toggle svg{width:calc(var(--code-base-size) * .9);height:calc(var(--code-base-size) * .9);transition:transform .2s}.fold-placeholder{display:none;background:#38bdf826;color:#38bdf8;border-radius:.25rem;padding:0 .3125rem;font-size:var(--code-ui-size);margin:0 .25rem;cursor:pointer}.fold-toggle.collapsed svg{transform:rotate(-90deg)}