.lab-page{--line:rgba(255,255,255,0.08);position:relative;z-index:10;min-height:100vh;padding-top:100px;font-family:'Inter',sans-serif;color:var(--text)}.lab-hero{text-align:center;padding:3rem 0 2.5rem}.lab-hero__eyebrow{display:inline-block;padding:.4rem 1.2rem;border-radius:50px;font-size:.85rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--teal);border:1px solid rgba(32,198,183,0.3);background:var(--glow-teal);margin-bottom:1.5rem}.lab-hero__heading{font-size:clamp(2rem,5vw,3.2rem);font-weight:900;color:var(--text);margin-bottom:1rem;line-height:1.15}.lab-hero__heading span{background:linear-gradient(135deg,var(--teal),var(--gold));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.lab-hero__subtitle{font-size:1.15rem;color:var(--text-dim);max-width:600px;margin:0 auto;line-height:1.7}.lab-toolbar{position:sticky;top:100px;z-index:100;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding:.75rem 1.25rem;background:var(--surface-1);border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,0.2)}.lab-toolbar__title{font-size:1.1rem;font-weight:700;color:var(--text)}.lab-toolbar__project{font-size:.9rem;color:var(--text-dim);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lab-toolbar__actions{display:flex;align-items:center;gap:.75rem}.lab-panels{display:grid;gap:1.5rem;padding:1.5rem 0}.lab-panels--two{grid-template-columns:1fr 1fr}.lab-panels--three{grid-template-columns:1fr 1fr 1fr}.lab-panel{background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:1.25rem;overflow:hidden}.lab-panel--scrollable{overflow-y:auto;max-height:70vh}.lab-panel__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--line)}.lab-panel__title{font-size:1rem;font-weight:600;color:var(--text)}.lab-tabs{display:flex;gap:.25rem;border-bottom:1px solid var(--line);margin-bottom:1rem}.lab-tab{padding:.6rem 1.25rem;font-size:.9rem;font-weight:500;color:var(--text-dim);background:transparent;border:0;border-radius:8px 8px 0 0;cursor:pointer;transition:all .2s ease}.lab-tab:hover{color:var(--text);background:rgba(255,255,255,0.04)}.lab-tab--active{color:var(--teal);background:rgba(32,198,183,0.08);border-bottom:2px solid var(--teal)}.lab-auth-banner{display:flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;background:var(--surface-2);border-bottom:1px solid var(--line);border-left:4px solid var(--teal)}.lab-auth-banner-content{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;max-width:1200px}.lab-auth-banner-text{font-size:.95rem;color:var(--text)}.lab-auth-banner-actions{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.lab-auth-banner-btn{padding:.4rem 1rem;font-size:.85rem;border:0;border-radius:6px;cursor:pointer;transition:all .2s ease}.lab-auth-banner-btn-primary{background:var(--teal);color:#fff}.lab-auth-banner-btn-primary:hover{filter:brightness(1.15)}.lab-auth-banner-dismiss{flex-shrink:0;padding:.35rem .5rem;font-size:1.1rem;line-height:1;color:var(--text-dim);background:transparent;border:0;cursor:pointer;transition:all .2s ease}.lab-auth-banner-dismiss:hover{color:var(--text)}.lab-sidebar-overlay{position:fixed;inset:0;z-index:1100;background:rgba(0,0,0,0.5);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}.lab-sidebar-overlay--open{opacity:1;visibility:visible}.lab-sidebar{position:fixed;top:0;right:0;bottom:0;z-index:1101;width:min(360px,90vw);background:var(--surface-1);border-left:1px solid var(--line);box-shadow:-8px 0 24px rgba(0,0,0,0.3);transform:translateX(100%);transition:transform .3s ease;display:flex;flex-direction:column}.lab-sidebar--open{transform:translateX(0)}.lab-sidebar__header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;border-bottom:1px solid var(--line)}.lab-sidebar__title{font-size:1.1rem;font-weight:700;color:var(--text)}.lab-sidebar__close{padding:.5rem;color:var(--text-dim);background:transparent;border:0;border-radius:8px;cursor:pointer;transition:all .2s ease}.lab-sidebar__close:hover{color:var(--text);background:rgba(255,255,255,0.06)}.lab-sidebar__list{flex:1;overflow-y:auto;padding:1rem}.lab-sidebar__item{display:block;width:100%;padding:1rem;margin-bottom:.5rem;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;text-align:left;cursor:pointer;transition:all .2s ease}.lab-sidebar__item:hover{border-color:var(--teal);box-shadow:0 0 0 1px rgba(32,198,183,0.2)}.lab-sidebar__item-name{font-size:.95rem;font-weight:600;color:var(--text);margin-bottom:.25rem}.lab-sidebar__item-date{font-size:.8rem;color:var(--text-dim)}.lab-modal-overlay{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;padding:1rem;background:rgba(0,0,0,0.6);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s ease}.lab-modal-overlay--open{opacity:1;visibility:visible}.lab-modal{width:100%;max-width:420px;background:var(--surface-1);border:1px solid var(--line);border-radius:12px;padding:1.5rem;box-shadow:0 16px 48px rgba(0,0,0,0.4);transform:scale(0.95);transition:transform .25s ease}.lab-modal-overlay--open .lab-modal{transform:scale(1)}.lab-modal__title{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:1rem}.lab-modal__body{margin-bottom:1.25rem}.lab-modal__footer{display:flex;justify-content:flex-end;gap:.75rem}.lab-share-url{display:flex;gap:.5rem;margin-bottom:1rem}.lab-share-url__input{flex:1;padding:.6rem 1rem;font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:8px}.lab-share-url__input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 2px rgba(32,198,183,0.2)}.lab-share-revoke{display:flex;align-items:center;gap:.5rem;margin-top:.75rem}.lab-versions{display:flex;flex-direction:column;gap:.5rem}.lab-versions__item{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem 1rem;background:var(--surface-2);border:1px solid var(--line);border-radius:8px}.lab-versions__timestamp{font-size:.85rem;color:var(--text-dim)}.lab-versions__restore{flex-shrink:0}.lab-toast-container{position:fixed;bottom:1.5rem;right:1.5rem;z-index:2000;display:flex;flex-direction:column;gap:.75rem;max-width:360px}.lab-toast{padding:1rem 1.25rem;background:var(--surface-1);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,0.3);animation:lab-toast-in .3s ease}.lab-toast--exit{animation:lab-toast-out .25s ease forwards}.lab-toast--success{border-left:4px solid var(--teal)}.lab-toast--error{border-left:4px solid var(--orange)}.lab-toast--info{border-left:4px solid var(--teal)}.lab-toast__message{font-size:.95rem;color:var(--text)}@keyframes lab-toast-in{from{opacity:0;transform:translateX(100%)}to{opacity:1;transform:translateX(0)}}@keyframes lab-toast-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(100%)}}.lab-badge{display:inline-block;padding:.25rem .65rem;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;border-radius:20px}.lab-badge--free{background:rgba(32,198,183,0.2);color:var(--teal)}.lab-badge--saveable{background:rgba(246,182,69,0.2);color:var(--gold)}.lab-badge--shareable{background:rgba(242,132,46,0.2);color:var(--orange)}.lab-badge--client-side{background:rgba(255,255,255,0.06);color:var(--text-dim)}.lab-editor{position:relative;background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow:hidden}.lab-editor__gutter{position:absolute;left:0;top:0;bottom:0;width:3rem;padding:1rem .5rem;font-family:'JetBrains Mono',monospace;font-size:.85rem;color:var(--text-dim);text-align:right;background:var(--surface-1);border-right:1px solid var(--line);user-select:none}.lab-editor__input{width:100%;min-height:200px;padding:1rem 1rem 1rem 4rem;font-family:'JetBrains Mono',monospace;font-size:.9rem;line-height:1.6;color:var(--text);background:var(--bg);border:0;resize:vertical}.lab-editor__input:focus{outline:0}.lab-editor__input::placeholder{color:var(--text-dim);opacity:.6}.lab-output{min-height:120px;padding:1rem 1.25rem;font-family:'JetBrains Mono',monospace;font-size:.9rem;line-height:1.6;color:var(--text);background:var(--bg);border:1px solid var(--line);border-radius:8px;overflow-x:auto}.lab-output--readonly{user-select:text;cursor:text}.lab-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.6rem 1.25rem;font-size:.9rem;font-weight:600;font-family:inherit;border-radius:8px;border:0;cursor:pointer;transition:all .2s ease}.lab-btn-primary{background:var(--teal-gradient);color:var(--bg)}.lab-btn-primary:hover{filter:brightness(1.1);box-shadow:0 4px 12px rgba(32,198,183,0.3)}.lab-btn-secondary{background:var(--surface-2);color:var(--text);border:1px solid var(--line)}.lab-btn-secondary:hover{border-color:var(--teal);color:var(--teal)}.lab-btn-danger{background:rgba(242,132,46,0.15);color:var(--orange);border:1px solid rgba(242,132,46,0.3)}.lab-btn-danger:hover{background:rgba(242,132,46,0.25)}.lab-btn-icon{padding:.5rem;min-width:36px;min-height:36px}.lab-btn-icon:hover{background:rgba(255,255,255,0.06)}.lab-card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;padding:2rem 0 4rem}.lab-card{display:flex;flex-direction:column;padding:2rem 1.75rem;background:var(--surface-2);border:1px solid var(--line);border-radius:16px;text-decoration:none;color:inherit;position:relative;overflow:hidden;transition:all .35s ease}.lab-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--teal),var(--gold));opacity:0;transition:opacity .35s ease}.lab-card:hover{transform:translateY(-4px);border-color:rgba(32,198,183,0.4);box-shadow:0 12px 40px rgba(0,0,0,0.3)}.lab-card:hover::before{opacity:1}.lab-card__icon{width:52px;height:52px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;margin-bottom:1.25rem}.lab-card__title{font-size:1.25rem;font-weight:700;color:var(--text);margin-bottom:.5rem}.lab-card__description{font-size:.95rem;color:var(--text-dim);line-height:1.6;flex:1;margin-bottom:1rem}.lab-card__badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.25rem}.lab-card__cta{display:inline-flex;align-items:center;gap:.5rem;color:var(--teal);font-weight:600;font-size:.95rem;transition:gap .3s ease}.lab-card:hover .lab-card__cta{gap:.75rem}.lab-unsaved{display:inline-flex;align-items:center;gap:.35rem;font-size:.8rem;color:var(--text-dim)}.lab-unsaved-dot{width:6px;height:6px;border-radius:50%;background:var(--teal);animation:lab-unsaved-pulse 1.5s ease-in-out infinite}@keyframes lab-unsaved-pulse{0%,100%{opacity:1}50%{opacity:.5}}.lab-input{width:100%;padding:.6rem 1rem;font-size:.95rem;font-family:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;transition:border-color .2s ease,box-shadow .2s ease}.lab-input:focus{outline:0;border-color:var(--teal);box-shadow:0 0 0 2px rgba(32,198,183,0.2)}.lab-input::placeholder{color:var(--text-dim);opacity:.7}.lab-select{width:100%;padding:.6rem 2rem .6rem 1rem;font-size:.95rem;font-family:inherit;color:var(--text);background:var(--surface-2);border:1px solid var(--line);border-radius:8px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvgxmlns='http://www.w3.org/2000/svg'width='12'height='12'viewBox='001212'%3E%3Cpathfill='%239AA7B4'd='M68L13h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1rem center}.lab-select:focus{outline:0;border-color:var(--teal)}.lab-slider{width:100%;height:6px;-webkit-appearance:none;appearance:none;background:var(--surface-2);border-radius:3px}.lab-slider::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--teal);cursor:pointer;transition:transform .2s ease}.lab-slider::-webkit-slider-thumb:hover{transform:scale(1.1)}.lab-slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--teal);border:0;cursor:pointer}.lab-toggle{position:relative;width:44px;height:24px;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;cursor:pointer;transition:background .2s ease}.lab-toggle::after{content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;background:var(--text-dim);border-radius:50%;transition:transform .2s ease,background .2s ease}.lab-toggle--on{background:rgba(32,198,183,0.2);border-color:var(--teal)}.lab-toggle--on::after{transform:translateX(20px);background:var(--teal)}.lab-label{display:block;font-size:.9rem;font-weight:500;color:var(--text);margin-bottom:.5rem}.lab-panel--scrollable,.lab-sidebar__list,.lab-editor__input,.lab-output{scrollbar-width:thin;scrollbar-color:var(--text-dim) transparent}.lab-panel--scrollable::-webkit-scrollbar,.lab-sidebar__list::-webkit-scrollbar,.lab-editor__input::-webkit-scrollbar,.lab-output::-webkit-scrollbar{width:8px;height:8px}.lab-panel--scrollable::-webkit-scrollbar-track,.lab-sidebar__list::-webkit-scrollbar-track,.lab-editor__input::-webkit-scrollbar-track,.lab-output::-webkit-scrollbar-track{background:transparent}.lab-panel--scrollable::-webkit-scrollbar-thumb,.lab-sidebar__list::-webkit-scrollbar-thumb,.lab-editor__input::-webkit-scrollbar-thumb,.lab-output::-webkit-scrollbar-thumb{background:var(--text-dim);border-radius:4px;opacity:.5}.lab-panel--scrollable::-webkit-scrollbar-thumb:hover,.lab-sidebar__list::-webkit-scrollbar-thumb:hover,.lab-editor__input::-webkit-scrollbar-thumb:hover,.lab-output::-webkit-scrollbar-thumb:hover{background:var(--text)}@media(max-width:768px){.lab-page{padding-top:80px}.lab-hero{padding:2rem 0 1.5rem}.lab-toolbar{top:80px;padding:.6rem 1rem}.lab-toolbar__actions{width:100%;justify-content:flex-end}.lab-panels--two,.lab-panels--three{grid-template-columns:1fr}.lab-panels{padding:1rem 0}.lab-sidebar{width:100%}.lab-card-grid{grid-template-columns:1fr;padding:1.5rem 0 3rem}.lab-card{padding:1.5rem 1.25rem}.lab-toast-container{bottom:1rem;right:1rem;left:1rem;max-width:none}}