/* Face first layout: top bar, camera window, tray. Nothing sits on the face. */
:root{--top:56px;--tray:230px}
html,body{background:#111!important}
#topBar{position:fixed!important;top:0;left:0;right:0;height:auto;z-index:40!important;display:flex!important;align-items:center;gap:10px;padding:max(env(safe-area-inset-top),8px) 14px 8px!important}
#topBar .live-pill{display:none!important}
#topBar #kNewBtn{position:static!important;display:none;margin-left:auto;min-height:34px!important;padding:0 12px!important;font-size:11px!important;letter-spacing:1px!important;background:var(--bx-ink)!important;color:#fff!important;border:0;font-family:var(--bx-head);font-weight:700}
#topBar #kNewBtn.show{display:block}
#kOffer{margin-left:auto}
.mode-kiosk #kOffer{margin-left:auto}

/* the camera window */
#video{opacity:0!important;pointer-events:none}
#arCanvas{position:fixed!important;top:var(--top)!important;bottom:var(--tray)!important;left:0!important;right:0!important;width:100%!important;height:calc(100% - var(--top) - var(--tray))!important;transform:none!important;z-index:2}
#camWin{position:fixed;top:var(--top);bottom:var(--tray);left:0;right:0;z-index:15;pointer-events:none}
#camWin>*{pointer-events:auto}
#faceGuide{top:calc(var(--top) + (100% - var(--top) - var(--tray))/2)!important}
#camHint{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);background:rgba(18,18,18,.7);color:#fff;font-family:var(--bx-head);font-size:11px;letter-spacing:1.5px;padding:6px 12px;white-space:nowrap;pointer-events:none;animation:hintOut 1s 9s forwards}
@keyframes hintOut{to{opacity:0}}
#lvlBox{position:absolute;right:6px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;width:34px}
#lvlBox span{font-family:var(--bx-head);font-size:8px;letter-spacing:1px;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.9)}
#lvl{-webkit-appearance:slider-vertical;appearance:slider-vertical;writing-mode:vertical-lr;direction:rtl;width:26px;height:150px;accent-color:var(--bx-amber);background:transparent}
#photoBar,#slowBar{position:absolute;left:10px;right:48px;top:10px;display:flex;align-items:center;gap:8px;background:rgba(18,18,18,.82);color:#fff;font-family:var(--bx-head);font-size:11px;letter-spacing:1px;padding:6px 8px}
#photoBar button,#slowBar button{background:var(--bx-amber);color:var(--bx-ink);border:0;font-family:var(--bx-head);font-weight:700;font-size:11px;letter-spacing:1px;padding:6px 10px}
#slowBar #sbX{background:transparent;color:#fff;margin-left:auto}
#photoBar span{margin-right:auto}
#photoBar[hidden],#slowBar[hidden],#pbLive[hidden]{display:none!important}

/* the tray */
#tray{position:fixed;left:0;right:0;bottom:0;z-index:30;background:#fff;border-top:4px solid var(--bx-amber);padding:6px 0 max(env(safe-area-inset-bottom),10px)}
#trWheels #filterCircles{display:flex;gap:14px!important;overflow-x:auto;scroll-snap-type:x mandatory;padding:10px calc(50% - 36px) 8px!important;scrollbar-width:none}
#trWheels #filterCircles::-webkit-scrollbar{display:none}
#tray .fcircle{width:60px!important;height:60px!important;flex:0 0 auto;border-radius:50%;position:relative;overflow:visible!important;border:3px solid #fff!important;box-shadow:0 1px 6px rgba(0,0,0,.25);transform:scale(.86);opacity:.85;scroll-snap-align:center;cursor:pointer}
#tray .fcircle .fcircle-bg{position:absolute;inset:0;border-radius:50%;overflow:hidden}
#tray .fcircle .fcircle-lbl{display:none!important}
#tray .fcircle.active{transform:scale(1.18)!important;opacity:1;border-color:var(--bx-amber)!important;box-shadow:0 0 0 4px var(--bx-amber),0 4px 14px rgba(0,0,0,.3)!important}
.fc-shot{display:none}
#tray .fcircle.active .fc-shot{display:block;position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(18,18,18,.55)}
.tr-name{text-align:center;font-family:var(--bx-head);font-weight:700;font-size:15px;letter-spacing:2.5px;color:var(--bx-ink);margin:2px 0 4px}
.tr-links{display:flex;justify-content:center;align-items:center;gap:6px;flex-wrap:wrap;padding:0 10px}
.tr-link{background:none;border:0;font-family:var(--bx-head);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--bx-ink);text-decoration:underline;text-underline-offset:3px;padding:6px 8px;cursor:pointer}
.tr-shop{background:var(--bx-amber);text-decoration:none;font-weight:700}
.tr-done{background:var(--bx-ink);color:#fff;border:0;font-family:var(--bx-head);font-weight:700;font-size:12px;letter-spacing:2px;padding:8px 22px;cursor:pointer}
#trCustomBox{padding:6px 0 4px}
#trCway #cway{display:flex!important;position:static;max-width:none}
#trCway .cw-tab{background:#F2F2F2;color:var(--bx-ink)}
#trCway .cw-tab.on{background:var(--bx-amber)}
#trCway .cw-name{color:var(--bx-ink);text-shadow:none}
#trCway .cw-dot{border-color:#fff;box-shadow:0 0 0 1px #ddd}

/* old floating controls are gone from the guest's view */
#filterStrip,#getThisLook,#shadesBtn,#clearBtn,#lookName,#routineCard,#kCapBtn{display:none!important}
body.k-lift #arCanvas,body.k-lift #video{transform:none!important}
/* the full shades panel takes the tray's place, never the camera window */
#shadesPanel{max-height:calc(var(--tray) + 60px)!important;z-index:35!important}
body.sp-open #tray{visibility:hidden}

/* phone screens */
.k-warn{display:flex;flex-direction:column;gap:6px;align-items:center;background:#FFF4D6;border:2px solid var(--bx-amber);padding:12px 14px;max-width:440px;font-size:14px;color:var(--bx-ink)}
.k-warn[hidden]{display:none}
.k-link{background:none;border:0;font-family:var(--bx-text);font-size:14px;text-decoration:underline;color:var(--bx-ink);cursor:pointer;padding:6px}
#kMine{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:520px}
#kMine .k-btn{min-height:52px;padding:0 20px;font-size:15px}
.k-shop{width:100%}
.k-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;color:var(--bx-ink);text-align:left;max-width:440px}
.k-check input{width:22px;height:22px;accent-color:var(--bx-amber);flex:0 0 auto;margin-top:1px}
#kEnterBox{display:flex;flex-direction:column;align-items:center;gap:6px}
.k-minor{gap:4px}
#kPrev .k-body{padding:16px 16px 28px}
#kPrevImg{max-height:50vh}
@media (min-width:700px){:root{--tray:300px}#tray .fcircle{width:76px!important;height:76px!important}#trWheels #filterCircles{padding:16px calc(50% - 44px) 12px!important;gap:20px!important}.tr-name{font-size:18px}.tr-link{font-size:14px}}