/* METASYS interactive demo / standalone, no real payments or D1 modifications. */
#app .demo-lab{padding:clamp(48px,7vw,100px) 0 110px;background:#f4f4f4;color:#111}
#app .lab-intro{padding:25px 0 36px}
#app .lab-title-row{display:flex;justify-content:space-between;align-items:end;gap:36px}
#app .lab-title-row h1{font:500 clamp(40px,6.8vw,95px)/.99 var(--font-editorial);letter-spacing:-.065em;color:#111;margin:13px 0 22px}
#app .lab-title-row p{font-size:clamp(14px,1.5vw,18px);line-height:1.58;color:#111;max-width:64ch}
#app .lab-title-row>.button{white-space:nowrap;flex:0 0 auto}
#app .lab-mode-banner{display:flex;gap:20px;align-items:center;padding:16px 19px;background:#151313;border-radius:5px;color:#fff;border:1px solid #151313;margin:0 0 25px}
#app .lab-mode-banner strong{font:700 11px/1.3 var(--font-technical);letter-spacing:.04em;white-space:nowrap;color:#fff}
#app .lab-mode-banner span{font-size:12px;color:#f4f4f4}
#app .lab-tabs{display:flex;flex-wrap:nowrap;overflow:auto;scrollbar-width:thin;gap:7px;padding:0 0 15px;margin-bottom:24px;border-bottom:1px solid #b6b6b6;-webkit-overflow-scrolling:touch}
#app .lab-tabs button{display:inline-flex;align-items:center;justify-content:center;min-height:43px;padding:11px 15px;border:1px solid #bdbdbd;background:#fff;color:#111;border-radius:5px;white-space:nowrap;font:600 12px/1.25 var(--font-interface)}
#app .lab-tabs button.active,#app .lab-tabs button:hover{background:#151313;color:#fff;border-color:#151313}
#app .lab-current{min-height:375px}
#app .lab-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:18px}
#app .lab-panel{padding:clamp(19px,2.4vw,30px);min-width:0;border:1px solid #d0d0d0;border-radius:5px;background:#eaeaea;color:#111;box-shadow:none}
#app .lab-panel-title{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #c4c4c4;padding-bottom:17px;margin-bottom:20px}
#app .lab-panel h2{font:500 clamp(23px,2.8vw,37px)/1.05 var(--font-editorial);letter-spacing:-.045em;color:#111;margin:0}
#app .lab-panel h3{font-size:20px;font-weight:600;letter-spacing:-.027em;color:#111;margin:0 0 9px}
#app .lab-panel p,#app .lab-panel li,#app .lab-panel span,#app .lab-panel small{color:#111}
#app .lab-note{font-size:12px;line-height:1.6;border-top:1px solid #c6c6c6;margin-top:17px;padding-top:15px;color:#111}
#app .lab-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;margin-bottom:22px}
#app .lab-stat{padding:26px 19px;background:#eaeaea;border:1px solid #cfcfcf;border-radius:5px;display:flex;flex-direction:column;gap:14px}
#app .lab-stat strong{font:500 clamp(36px,4vw,60px)/1 var(--font-editorial);letter-spacing:-.055em;color:#111}
#app .lab-stat span{font-size:12px;text-transform:uppercase;letter-spacing:.01em;color:#111}
#app .lab-feature-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
#app .lab-feature{border:1px solid #ccc;background:#fff;color:#111;border-radius:5px;min-height:118px;padding:19px;display:flex;align-items:start;flex-direction:column;text-align:left;gap:8px}
#app .lab-feature:hover,#app .lab-feature:focus-visible{border-color:#151313;background:#dedede}
#app .lab-feature strong{font-size:16px;color:#111}
#app .lab-feature>span:last-child{margin-top:auto;color:#111;font-size:12px}
#app .lab-summary{padding:17px;background:#fff;color:#111;border:1px solid #ddd;border-radius:5px;line-height:1.5}
#app .lab-summary p{padding:9px 0;margin:0;border-bottom:1px solid #e1e1e1;font-size:12px}
#app .lab-summary p:last-child{border-bottom:0}
#app .lab-feature-heading{display:flex;justify-content:space-between;align-items:end;gap:22px;padding:0 0 22px}
#app .lab-feature-heading h2{font:500 clamp(34px,4.5vw,62px)/1 var(--font-editorial);letter-spacing:-.06em;margin:10px 0;color:#111}
#app .lab-feature-heading label{display:grid;gap:8px}
#app .lab-demo-directory{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:660px;overflow:auto;scrollbar-width:thin}
#app .lab-project-card{display:flex;flex-direction:column;align-items:start;min-height:132px;text-align:left;gap:10px;background:#fff;color:#111;border:1px solid #d3d3d3;border-radius:5px;padding:14px}
#app .lab-project-card.selected,#app .lab-project-card:hover{border-color:#151313;background:#f4f4f4}
#app .lab-project-card strong{font-size:15px;font-weight:600;color:#111;line-height:1.25}
#app .lab-project-card small{color:#111;font-size:11px;margin-top:auto}
#app .lab-project-preview{display:grid;gap:12px}
#app .lab-artwork{min-height:240px;display:flex;flex-direction:column;justify-content:space-between;padding:21px;gap:14px;background:#151313;color:#fff;border-radius:5px;position:relative;overflow:hidden}
#app .lab-artwork:after{content:"";position:absolute;right:-10%;top:15%;width:52%;height:95%;opacity:.65;background:linear-gradient(45deg,#6840ff,#a1ff62);clip-path:polygon(0 0,90% 17%,100% 62%,30% 100%)}
#app .lab-artwork>*{position:relative;z-index:1;color:#fff!important;max-width:60%}
#app .lab-artwork strong{font:500 clamp(28px,3.5vw,45px)/.99 var(--font-editorial);letter-spacing:-.05em}
#app .lab-artwork span,#app .lab-artwork small{font-size:10px;font-family:var(--font-technical)}
#app .lab-inline{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
#app .lab-form{display:grid;gap:15px}
#app .lab-form label,#app .lab-feature-heading label,#app .lab-product label{display:flex;flex-direction:column;align-items:stretch;gap:7px;font:600 12px/1.45 var(--font-interface);color:#111}
#app .lab-form input:not([type=checkbox]),#app .lab-form textarea,#app .lab-form select,#app .lab-product select,#app .lab-feature-heading select{width:100%;min-height:44px;padding:11px 12px;border:1px solid #919191;border-radius:5px;background:#fff;color:#111;font:500 14px/1.3 var(--font-interface)}
#app .lab-form input::placeholder{color:#444}
#app .lab-form .lab-check{display:flex;flex-direction:row;align-items:center;gap:12px}
#app .lab-form input[type=checkbox]{width:18px;height:18px;flex:0 0 18px}
#app .lab-field-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
#app .lab-progress{display:flex;justify-content:space-between;gap:8px;align-items:center}
#app .lab-progress-track{height:8px;background:#bbb;border-radius:5px;margin:10px 0 20px;overflow:hidden}
#app .lab-progress-track i{height:100%;display:block;background:#151313}
#app .lab-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#app .lab-checks div{display:flex;align-items:start;gap:9px;font-size:12px;line-height:1.5}
#app .lab-status{font-size:13px;padding:15px 0;border-bottom:1px solid #ccc}
#app .lab-disabled{opacity:.55}
#app .lab-map{height:390px;position:relative;border:1px solid #bcbcbc;border-radius:5px;background-color:#f4f4f4;background-image:linear-gradient(#e0e0e0 1px,transparent 1px),linear-gradient(90deg,#e0e0e0 1px,transparent 1px);background-size:10% 10%}
#app .lab-map-pin{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:43px;min-height:43px;background:#151313;color:#fff;border:1px solid #151313;border-radius:50%;font-weight:700}
#app .lab-map-pin:hover,#app .lab-map-pin:focus-visible{background:#6840ff;color:#fff}
#app .lab-map-label{position:absolute;bottom:16px;left:16px;right:16px;font:500 11px var(--font-technical);color:#111}
#app .lab-zone-list{display:grid;gap:9px}
#app .lab-zone-list button{display:flex;flex-direction:column;align-items:start;gap:7px;padding:13px;background:#fff;color:#111;border:1px solid #d0d0d0;border-radius:5px;text-align:left}
#app .lab-zone-list button.active,#app .lab-zone-list button:hover{border-color:#111;background:#f6f6f6}
#app .lab-zone-list button strong{color:#111}
#app .lab-plain-list{display:grid;gap:7px}
#app .lab-plain-list>div{display:flex;align-items:center;gap:11px;justify-content:space-between;flex-wrap:wrap;border-bottom:1px solid #c8c8c8;padding:11px 0}
#app .lab-plain-list>div>span{font-size:12px;overflow-wrap:anywhere}
#app .lab-plain-list>button{display:block;border-bottom:1px solid #ccc;background:transparent;color:#111;text-align:left;padding:11px 0}
#app .lab-sessions{display:grid;gap:12px}
#app .lab-session{display:grid;grid-template-columns:85px minmax(0,1fr) auto;gap:13px;align-items:center;padding:12px 0;border-bottom:1px solid #c4c4c4}
#app .lab-session>span{font-size:11px;font-family:var(--font-technical);color:#111}
#app .lab-session>div h3{font-size:16px}
#app .lab-session>div p{font-size:12px}
#app .lab-ticket{padding:12px 0}
#app .lab-ticket:empty{display:none}
#app #lab-rsvp-camera{width:100%;max-height:320px;aspect-ratio:4/3;object-fit:contain;background:#151313;border-radius:5px;margin:10px 0}
#app .lab-result{padding:15px 18px;border:1px solid #bbb;border-radius:5px;background:#fff;color:#111;line-height:1.6;font-size:13px;margin:12px 0}
#app .lab-qr-code{display:inline-block;padding:12px;background:#fff;border:1px solid #bbb;border-radius:5px;margin:10px 0}
#app .lab-qr-code :is(canvas,img){display:block;max-width:100%}
#app :is(.lab-ticket,#lab-merch-receipt,#lab-project-qr){display:grid;justify-items:start;gap:9px;overflow-wrap:anywhere}
#app :is(.lab-ticket,#lab-merch-receipt,#lab-project-qr)>code{font-size:12px;overflow-wrap:anywhere;white-space:normal;color:#111}
#app .lab-products{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
#app .lab-product{display:grid;gap:12px;align-content:start;min-width:0;border:1px solid #ccc;background:#fff;border-radius:5px;padding:18px}
#app .lab-product h3{font-size:18px}
#app .lab-product strong{font-size:20px}
#app .lab-product p{font-size:12px}
#app .lab-divider{height:1px;background:#bdbdbd;margin:18px 0}
#app .lab-archive-card{display:flex;flex-direction:column;gap:13px;align-items:start;padding:19px;border:1px solid #cacaca;background:#fff;border-radius:5px}
#app .lab-archive-card .button{margin-top:auto}
#app .lab-activity{display:grid;gap:9px}
#app .lab-activity p{margin:0;padding:11px 13px;border:1px solid #ddd;background:#fff;border-radius:5px;font-size:12px}
#app .lab-empty{min-height:230px;display:flex;align-items:start;justify-content:center;flex-direction:column;gap:14px}
#app .lab-empty h3{font-size:clamp(25px,3.5vw,42px)}
#app .lab-panel .eyebrow,#app .lab-feature-heading .eyebrow{color:#111}
#app .demo-lab .button.primary{background:#a1ff62;border:1px solid #75bb43;color:#111}
#app .demo-lab .button.primary:hover{background:#90ee50;border-color:#4a8d27;color:#111}
#app .demo-lab .button.light{background:#fff;border:1px solid #111;color:#111}
#app .demo-lab .button.light:hover{background:#d8d8d8;color:#111}
#app .demo-lab :is(a,button,input,textarea,select):focus-visible{outline:2px solid #4934e5;outline-offset:2px}
@media(max-width:980px){
 #app .lab-two{grid-template-columns:minmax(0,1fr)}
 #app .lab-demo-directory{grid-template-columns:repeat(3,minmax(0,1fr));max-height:500px}
}
@media(max-width:720px){
 #app .demo-lab{padding:48px 0 80px}
 #app .lab-title-row{align-items:start;flex-direction:column;gap:18px}
 #app .lab-title-row>.button{white-space:normal}
 #app .lab-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .lab-demo-directory{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app .lab-sessions{gap:5px}
 #app .lab-session{grid-template-columns:75px minmax(0,1fr);gap:10px}
 #app .lab-session>.button{grid-column:2;justify-self:start}
 #app .lab-mode-banner{flex-direction:column;align-items:start;gap:7px}
}
@media(max-width:480px){
 #app .lab-title-row h1{font-size:clamp(38px,11vw,54px)}
 #app .lab-stat-grid{gap:9px}
 #app .lab-stat{padding:18px 13px}
 #app .lab-feature-grid,#app .lab-demo-directory,#app .lab-products,#app .lab-field-grid,#app .lab-checks{grid-template-columns:minmax(0,1fr)}
 #app .lab-feature-heading{flex-direction:column;align-items:stretch}
 #app .lab-panel{padding:18px}
 #app .lab-panel-title{padding-bottom:13px}
 #app .lab-inline .button{width:100%}
 #app .lab-artwork{min-height:210px}
}
@media(prefers-reduced-motion:reduce){
 #app .demo-lab *,#app .demo-lab *:before,#app .demo-lab *:after{scroll-behavior:auto!important;transition:none!important}
}