@layer components{.logs-preview{--logs-surface-100:#03070d;--logs-surface-200:#0a111d;--logs-surface-300:#111d33;--logs-border:#dbe6ff3d;--logs-text:#dbe6ff;--logs-muted:#dce8ffad;height:100%;color:var(--logs-text);font-family:var(--monospace-font);background:radial-gradient(circle at 13% 3%,#6db3ce47,#0000 34%),radial-gradient(circle at 88% 94%,#ffbf6833,#0000 40%),linear-gradient(160deg,#0b121f 0%,#060a12 55%,#04070d 100%);padding:12px;display:flex;position:relative;overflow:clip}.logs-preview:before{content:"";opacity:.32;pointer-events:none;background-image:repeating-linear-gradient(#ffffff08,#ffffff08 1px,#0000 1px 3px);position:absolute;inset:0}.logs-preview:after{content:"";pointer-events:none;background:radial-gradient(circle,#0000 52%,#00000075);position:absolute;inset:0}.logs-preview__surface{z-index:1;border:1px solid var(--logs-border);background:linear-gradient(#111d33f2 0%,#070c16f2 58%,#04080ffa 100%);border-radius:10px;grid-template-rows:24px minmax(0,1fr) auto;width:100%;height:100%;display:grid;position:relative;overflow:hidden;box-shadow:inset 0 1px #ffffff0f,0 18px 34px #00000073}.logs-preview__toolbar{background-color:#162540a3;border-bottom:1px solid #e0eaff24;align-items:center;gap:8px;padding:0 8px;display:flex}.logs-preview__window-controls{gap:4px;display:flex}.logs-preview__window-dot{border-radius:50%;width:6px;height:6px}.logs-preview__window-dot--red{background-color:#ff6d7a}.logs-preview__window-dot--yellow{background-color:#ffd484}.logs-preview__window-dot--green{background-color:#8fc8bb}.logs-preview__toolbar-title{color:#dbe6ffcc;letter-spacing:.08em;text-transform:lowercase;margin-left:auto;font-size:8px;line-height:1}.logs-preview__timeline{flex-direction:column;gap:4px;padding:6px;display:flex;overflow:hidden}.logs-preview__load{color:#ecf2ffb8;background-color:#182337eb;border:1px solid #ecf2ff38;border-radius:999px;align-self:center;padding:2px 6px;font-size:7px;font-weight:600;line-height:1;animation:3.6s ease-in-out infinite logs-preview-load-pulse}.logs-preview__line{background-color:#0e1727c7;border:1px solid #dee9ff1f;border-radius:4px;grid-template-columns:max-content minmax(0,1fr);align-items:baseline;gap:6px;padding:2px 4px;font-size:7px;line-height:1.3;display:grid}.logs-preview__line--highlight{background-color:#25407c73;border-color:#679dff66}.logs-preview__line--warn{background-color:#563a1794;border-color:#ffca745c}.logs-preview__line--danger{background-color:#511f279e;border-color:#e784826b}.logs-preview__timestamp{color:var(--logs-muted);white-space:nowrap}.logs-preview__message{color:#ecf1ffeb;white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.logs-preview__empty{color:#d4e2ff99;text-align:center;margin-top:2px;font-size:7px;line-height:1}.logs-preview__composer{background-color:#070b13f0;border-top:1px solid #dae5ff1f;grid-template-columns:minmax(0,1fr) auto;gap:6px;padding:6px;display:grid}.logs-preview__composer-text{color:#e9f1ffd6;white-space:nowrap;text-overflow:ellipsis;border:1px solid #ecf2ff3d;border-radius:6px;padding:4px 6px;font-size:7px;line-height:1.2;overflow:hidden}.logs-preview__composer-button{color:#0e1220;background-color:#d8def8;border-radius:6px;place-items:center;min-width:32px;padding:0 8px;font-size:7px;font-weight:800;line-height:1;display:grid;box-shadow:inset 0 1px #ffffffa6}@keyframes logs-preview-load-pulse{0%,to{opacity:.7}50%{opacity:1}}@media (prefers-reduced-motion:reduce){.logs-preview__load{animation:none}}}