.lab-body { --lab-accent: #a6a8ff; }
.lab-project-icon { overflow:hidden; }
.lab-project-icon img { width:100%; height:100%; object-fit:contain; }
.lab-icon-editor { display:flex; align-items:center; flex-wrap:wrap; gap:12px; }
.lab-icon-editor .lab-project-icon { width:64px; height:64px; }
.lab-icon-editor .lab-upload { margin:0; }
.lab-shot-wrap--landscape { width:310px; max-width:90%; }
.lab-login-page { max-width:440px; margin:40px auto 80px; padding:28px; border:1px solid #424b75; border-radius:22px; background:#10172f; }
.lab-login-page h1 { font-size:1.8rem; }
.lab-login-page > p:not(.eyebrow) { color:#bbc4e1; }
.lab-shot-tools + .lab-field { margin-top:10px; }
.lab-notice[data-error="true"] { color:#ffc5d0; }
.lab-card { scroll-margin-top:110px; }
.lab-body [hidden] { display: none !important; }
.lab-main { padding-top: 124px; padding-bottom: 50px; }
.lab-body .site-nav a[aria-current="page"] { color: #e0deff; background: rgba(131,135,255,.12); }
.lab-prototype { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; padding:14px 18px; border:1px dashed rgba(177,185,255,.25); border-radius:16px; color:#cbd0e2; font-size:.78rem; }
.lab-prototype > div:first-child { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.lab-prototype strong { color:#ebeaff; font-size:.8rem; }
.lab-prototype-dot { width:6px; height:6px; border-radius:50%; background:#a6a8ff; box-shadow:0 0 12px #8387ff; }
.lab-prototype-caption { color:#a1a9c5; }
.lab-mode { display:flex; flex-wrap:wrap; gap:4px; }
.lab-mode button, .lab-text-btn { border:0; background:transparent; color:#b4bdd8; font:inherit; cursor:pointer; padding:9px 12px; border-radius:9px; }
.lab-mode button[aria-pressed="true"] { background:#2b2f55; color:#f6f5ff; }
.lab-mode button:hover,.lab-text-btn:hover { background:rgba(131,135,255,.1); color:#fff; }
.lab-intro { padding:54px 0 36px; max-width:790px; }
.lab-intro h1 { display:flex; align-items:center; gap:22px; margin:12px 0 18px; font-size:clamp(2.5rem,5vw,4.3rem); line-height:1.05; letter-spacing:-.055em; }
.lab-intro h1 span { color:#8b8cf1; font-size:.64em; font-weight:400; }
.lab-intro > p:not(.eyebrow) { font-size:1.03rem; line-height:1.8; color:var(--text-secondary); margin:0 0 14px; }
.lab-back { display:inline-flex; gap:9px; font-size:.83rem; text-decoration:none; color:#b6b7f6; }
.lab-back:hover { color:#e3e2ff; }
.lab-adminbar { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; background:rgba(107,109,235,.1); border:1px solid rgba(151,154,246,.24); border-radius:18px; padding:18px 20px; margin:2px 0 20px; }
.lab-owner { font-size:.87rem; font-weight:700; color:#e4e4ff; }
.lab-adminbar p { margin:3px 0 0; font-size:.76rem; color:#aab4d1; }
.lab-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.lab-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:42px; padding:10px 15px; font:inherit; font-weight:650; font-size:.8rem; text-decoration:none; border:1px solid rgba(166,174,224,.24); border-radius:11px; background:rgba(137,145,204,.055); color:#e5e9fc; cursor:pointer; transition:background .18s,border-color .18s; }
.lab-btn:hover { border-color:#8d96cf; background:rgba(137,145,204,.14); }
.lab-btn--primary { background:#7372e6; border-color:#8785f2; color:#fff; }
.lab-btn--primary:hover { background:#8583ee; }
.lab-btn--danger { color:#ffc9d2; border-color:#915467; background:#462838; }
.lab-btn:disabled { opacity:.38; cursor:default; }
.lab-btn--tiny { min-height:34px; padding:6px 10px; font-size:.75rem; }
.lab-btn:focus-visible,.lab-mode button:focus-visible,.lab-text-btn:focus-visible,.lab-shot:focus-visible,.lab-field input:focus-visible,.lab-field textarea:focus-visible,.lab-field select:focus-visible { outline:2px solid #b5beff; outline-offset:3px; }
.lab-notice { margin:0 0 16px; font-size:.83rem; color:#b5e6d1; }
.lab-notice:empty { display:none; }
.lab-projects { display:grid; gap:24px; }
.lab-card { min-width:0; border:1px solid rgba(177,185,255,.15); border-radius:25px; background:linear-gradient(125deg,rgba(23,31,68,.84),rgba(11,17,42,.85)); padding:27px 28px; box-shadow:inset 0 1px rgba(255,255,255,.025); }
.lab-card--hidden { border-style:dashed; }
.lab-card-top { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:24px; }
.lab-identity { display:flex; align-items:center; gap:13px; min-width:0; }
.lab-project-icon { width:43px; height:43px; border-radius:13px; display:grid; place-items:center; background:#222944; color:#bdbbff; border:1px solid rgba(166,168,255,.18); font-size:1.2rem; flex-shrink:0; }
.lab-card h2 { margin:0; font-size:1.4rem; line-height:1.25; letter-spacing:-.035em; overflow-wrap:anywhere; }
.lab-platform { font-size:.72rem; color:#a4adc6; margin-top:4px; display:block; }
.lab-status { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border:1px solid rgba(166,168,255,.2); border-radius:99px; font-size:.73rem; color:#c1c2ff; background:rgba(131,135,255,.07); white-space:nowrap; }
.lab-status::before { content:""; width:5px; height:5px; border-radius:50%; background:currentColor; }
.lab-status--development { color:#a3e4d0; border-color:rgba(133,212,184,.22); background:rgba(84,170,139,.06); }
.lab-status--testing { color:#f2d492; border-color:rgba(235,199,125,.2); background:rgba(211,172,98,.06); }
.lab-status--paused,.lab-status--released { color:#b8bdcf; border-color:#4a526c; background:#252b3d; }
.lab-card-grid { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:36px; align-items:start; }
.lab-card--no-images .lab-card-grid { grid-template-columns:1fr; }
.lab-description { margin:0 0 20px; color:#d6daec; font-size:.92rem; line-height:1.7; max-width:740px; }
.lab-note { padding-left:15px; border-left:2px solid rgba(148,148,250,.38); margin:0 0 23px; }
.lab-note-label { color:#aeb5d0; font-size:.69rem; text-transform:uppercase; letter-spacing:.09em; }
.lab-note p { margin:7px 0 8px; font-size:.86rem; color:#bec6df; line-height:1.75; white-space:pre-wrap; overflow-wrap:anywhere; }
.lab-note small { font-size:.7rem; color:#929ebc; }
.lab-builds { display:flex; flex-wrap:wrap; gap:9px; }
.lab-build { background:linear-gradient(120deg,rgba(82,91,171,.18),rgba(100,84,153,.13)); }
.lab-build-note { margin:9px 0 0; font-size:.71rem; color:#929ebc; }
.lab-no-build { display:inline-flex; gap:7px; color:#9ea7c1; font-size:.78rem; }
.lab-gallery { min-width:0; }
.lab-gallery-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; font-size:.72rem; color:#a2acc8; }
.lab-gallery-controls { display:flex; gap:5px; }
.lab-gallery-controls button { padding:4px 10px; min-height:30px; }
.lab-gallery-track { display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#555d85 transparent; padding:0 0 9px; overscroll-behavior-x:contain; }
.lab-shot-wrap { flex:0 0 auto; width:150px; scroll-snap-align:start; }
.lab-shot { display:block; width:100%; padding:0; border:1px solid rgba(155,165,214,.24); border-radius:15px; overflow:hidden; background:#080e23; cursor:zoom-in; }
.lab-shot img { display:block; width:100%; height:248px; object-fit:contain; }
.lab-shot-caption { display:block; margin-top:7px; color:#99a5c3; font-size:.67rem; overflow-wrap:anywhere; }
.lab-card-tools { display:flex; flex-wrap:wrap; align-items:center; gap:5px; border-top:1px solid rgba(169,180,228,.12); margin-top:23px; padding-top:15px; }
.lab-card-tools .lab-text-btn { font-size:.74rem; }
.lab-card-tools .lab-spacer { flex:1; }
.lab-owner-tag { font-size:.68rem; color:#e7c998; }
.lab-editor { display:grid; gap:16px; }
.lab-form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.lab-field { display:grid; gap:7px; font-size:.76rem; color:#bbc4e1; min-width:0; }
.lab-field input,.lab-field textarea,.lab-field select { width:100%; min-width:0; padding:11px 12px; border:1px solid #444e76; border-radius:10px; background:#10172f; color:#f1f1fc; font:inherit; font-size:.88rem; line-height:1.55; color-scheme:dark; }
.lab-field textarea { resize:vertical; min-height:86px; }
.lab-field input:disabled { opacity:.65; }
.lab-link-editor { padding:12px 0; display:grid; gap:9px; border-bottom:1px solid rgba(170,180,222,.13); }
.lab-editor-title { margin:3px 0 0; font-size:.85rem; color:#dfe3f6; }
.lab-editor-links { display:grid; gap:3px; }
.lab-editor-error { color:#ffc5d0; font-size:.8rem; margin:0; }
.lab-upload { display:inline-flex; margin-top:14px; cursor:pointer; }
.lab-upload input { position:absolute; width:1px; height:1px; opacity:0; }
.lab-upload:focus-within { outline:2px solid #b5beff; outline-offset:3px; }
.lab-shot-tools { display:flex; justify-content:center; gap:5px; margin-top:7px; }
.lab-shot-tools button { padding:5px 8px; min-height:30px; }
.lab-gallery-empty { display:grid; place-items:center; min-height:210px; border:1px dashed #434c70; border-radius:15px; color:#9ca8c6; text-align:center; padding:20px; font-size:.82rem; }
.lab-editor-hint { color:#9ba5bf; font-size:.72rem; margin:9px 0; }
.lab-trash { border:1px dashed #555c7c; padding:20px; border-radius:18px; margin-bottom:20px; }
.lab-trash h2 { font-size:1rem; margin:0 0 14px; }
.lab-trash-row { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; padding:8px 0; font-size:.87rem; }
.lab-empty { padding:54px 20px; text-align:center; color:#b8c1d8; }
.lab-empty h2 { color:#e5e7f5; font-size:1.5rem; }
.lab-footer { display:flex; gap:15px; flex-wrap:wrap; justify-content:space-between; margin-top:45px; padding-top:25px; border-top:1px solid var(--line); color:#929cba; font-size:.78rem; }
.lab-footer a { text-decoration:none; color:#babaf4; }
.lab-dialog,.lab-lightbox { color:#eef0ff; border:1px solid #424b75; border-radius:22px; background:#10172f; box-shadow:0 30px 100px #0008; max-width:calc(100vw - 28px); }
.lab-dialog { width:440px; padding:30px; }
.lab-dialog h2 { font-size:1.55rem; line-height:1.25; margin:0 0 15px; }
.lab-dialog p { font-size:.9rem; color:#bac5df; }
.lab-dialog::backdrop,.lab-lightbox::backdrop { background:rgba(2,6,20,.84); backdrop-filter:blur(8px); }
.lab-lightbox { width:min(1000px,calc(100vw - 28px)); padding:18px; }
.lab-lightbox-top,.lab-lightbox-nav { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:.84rem; color:#b5bfdc; }
.lab-lightbox > img { width:100%; height:min(69vh,780px); object-fit:contain; margin:14px auto; }
.lab-lightbox-nav { justify-content:center; }
.lab-login { display:none; }
.lab-login[open] { display:grid; gap:15px; }
.lab-login img { border-radius:18px; }
.lab-login .eyebrow { margin:5px 0 0; }
.lab-login p,.lab-login h2 { margin:0; }
.lab-login small { color:#a7b1ce; line-height:1.6; font-size:.73rem; }
.lab-login-close { position:absolute; right:14px; top:12px; }
@media (max-width:1000px) { .lab-card-grid { gap:23px; grid-template-columns:1fr 1fr; } .lab-shot-wrap { width:135px; } .lab-shot img { height:224px; } }
@media (max-width:760px) { .lab-card-grid { grid-template-columns:1fr; } .lab-card { padding:22px; } .lab-card-top { margin-bottom:20px; } .lab-gallery { margin-top:2px; } .lab-shot-wrap { width:150px; } .lab-shot img { height:248px; } }
@media (max-width:680px) {
  .lab-main { padding-top:92px; }
  .lab-prototype { padding:12px; gap:10px; }
  .lab-prototype-caption { display:block; width:100%; }
  .lab-mode { width:100%; }
  .lab-mode button { padding:9px 11px; font-size:.76rem; }
  .lab-intro { padding:32px 3px 28px; }
  .lab-intro h1 { font-size:2.55rem; gap:14px; }
  .lab-intro > p:not(.eyebrow) { font-size:.92rem; }
  .lab-card { padding:19px 17px; border-radius:20px; }
  .lab-card h2 { font-size:1.25rem; }
  .lab-status { font-size:.7rem; }
  .lab-adminbar { padding:15px; }
  .lab-adminbar > .lab-actions { width:100%; }
  .lab-form-row { grid-template-columns:1fr; }
  .lab-field input,.lab-field textarea,.lab-field select { font-size:1rem; }
  .lab-card-tools .lab-spacer { display:none; }
  .lab-dialog { padding:24px; }
}
@media (pointer:coarse) { .lab-btn,.lab-text-btn,.lab-mode button,.lab-gallery-controls button,.lab-shot-tools button { min-height:44px; } }
@media (prefers-reduced-motion:reduce) { .lab-btn { transition:none; } .lab-gallery-track { scroll-behavior:auto; } }
.lab-gallery .lab-shot-wrap--landscape { width:310px; max-width:90%; }