:root{--bg: #f4f2ee;--panel: #fffaf3;--ink: #1f1f1f;--accent: #2d6a4f;--accent-soft: #d8f3dc;--error: #b42318}html,body,#root{height:100%}*{box-sizing:border-box}body{margin:0;font-family:Avenir Next,Segoe UI,sans-serif;background:radial-gradient(circle at top right,#e3dccd,var(--bg));color:var(--ink);overflow:auto}.container{min-height:calc(100dvh - 2rem);padding:1rem;display:grid;gap:1rem}.upload-banner{position:sticky;top:.4rem;z-index:20;display:flex;justify-content:space-between;align-items:center;gap:.8rem;background:#fff6dc;border:1px solid #d5b97a;border-radius:10px;padding:.55rem .75rem;color:#5a4821}.upload-banner.completed{background:#e9f7ee;border-color:#8ec9a2;color:#1f5132}.upload-banner.cancelled,.upload-banner.error{background:#fdecec;border-color:#efb5b5;color:#7a1f1f}.card{background:var(--panel);border:2px solid #c4bcae;border-radius:16px;padding:1rem}h3{margin:0;font-size:1rem}.login-screen{place-items:center}.login-form{width:min(420px,92vw);display:grid;gap:.8rem}.button-link{display:inline-flex;align-items:center;justify-content:center;text-decoration:none;border-radius:10px;border:1px solid #b3ad9d;padding:.7rem .9rem;color:inherit;background:#fff}.button-link.primary{background:var(--accent);color:#fff;border-color:var(--accent)}.login-divider{font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:#756f63;text-align:center}.brand-mark{display:flex;align-items:center;gap:.7rem}.brand-mark.compact{margin-bottom:.25rem;gap:.55rem}.brand-logo{width:64px;height:64px;border-radius:12px;object-fit:cover;border:1px solid #c4bcae;background:#f0ece4}.brand-mark.compact .brand-logo{width:36px;height:36px;border-radius:8px}.brand-title{font-size:1.45rem;font-weight:700;line-height:1.1}.brand-mark.compact .brand-title{font-size:1rem}.brand-subtitle{margin-top:.14rem;font-size:.8rem;color:#625d53}label{display:grid;gap:.4rem}input,select,button{font:inherit;border-radius:10px;border:1px solid #b3ad9d;padding:.5rem .65rem}button{cursor:pointer;background:#fff}button:hover{border-color:var(--accent)}.error{color:var(--error);margin:0}.setup-screen{grid-template-columns:minmax(0,2fr) minmax(300px,1fr);align-items:start}.finder-card{grid-column:auto}.manage-screen{grid-template-columns:minmax(0,1fr);align-items:start}.manage-header-actions{display:flex;justify-content:flex-start}.deck-list{display:grid;gap:.8rem}.deck-row{border:1px solid #cfc7b8;border-radius:14px;background:#fffdf9;padding:.8rem;display:grid;grid-template-columns:60px minmax(0,1fr) auto;gap:.75rem;align-items:center;cursor:pointer}.deck-row.placeholder{cursor:default;background:#f8f4ec}.deck-avatar{width:56px;height:56px;border-radius:14px;border:1px solid #b7b09f;background:#ece7dc;display:grid;place-items:center;font-weight:700;color:#5c5547;overflow:hidden}.deck-avatar-skeleton,.folder-row-skeleton,.image-thumb-skeleton,.image-label-skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg,#ede7dc,#f6f2e9,#ede7dc);background-size:200% 100%;animation:skeleton-shimmer 1.1s linear infinite}.deck-avatar-skeleton{width:100%;height:100%;border-radius:14px}.deck-avatar-image{width:100%;height:100%;object-fit:cover;display:block}.deck-meta{min-width:0}.deck-meta h3{font-size:1rem;margin:0 0 .2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.deck-row-actions{display:flex;gap:.55rem;align-items:center}.deck-upload-row{grid-column:2 / -1;display:grid;gap:.35rem}.deck-upload-progress-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.5rem;align-items:center}.deck-upload-progress-wrap progress{width:100%;height:10px}.cancel-upload-btn{justify-self:start}.inline-between{display:flex;justify-content:space-between;align-items:center}.actions-inline{display:flex;gap:.6rem;padding:.2rem 0;align-items:center;flex-wrap:wrap}.actions-inline button{padding:.58rem .8rem}.top-space{margin-top:.9rem}.set-select{max-width:min(560px,68%)}.set-controls{display:flex;align-items:center;gap:.8rem;justify-content:flex-end;width:auto;min-width:0}.set-controls .set-select{flex:1;min-width:0;max-width:none;padding-right:2rem}.set-controls button{white-space:nowrap}.set-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:.9rem;margin-bottom:.85rem}.set-row h3{white-space:nowrap}.section-divider{border:0;border-top:1px solid #cfc7b8;margin:.7rem 0 .9rem}.empty-tip{position:relative;margin:.15rem 0 .35rem auto;max-width:min(520px,100%);background:#fff6dc;border:1px solid #d5b97a;border-radius:10px;padding:.55rem .7rem;color:#5a4821;font-size:.9rem}.empty-tip:after{content:"";position:absolute;top:-7px;right:112px;width:12px;height:12px;background:#fff6dc;border-left:1px solid #d5b97a;border-top:1px solid #d5b97a;transform:rotate(45deg)}.folder-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem}.folder-grid button.active{background:var(--accent-soft);border-color:var(--accent)}.finder-browser{display:grid;grid-template-columns:minmax(220px,290px) minmax(0,1fr);gap:.9rem}.card-soft{border:1px solid #cfc7b8;border-radius:12px;padding:.55rem;background:#fffdf9}.folder-tree h3{margin-bottom:.45rem}.folder-tree-list{max-height:54vh;overflow:auto;display:grid;gap:.2rem;padding-bottom:.45rem}.folder-row{display:grid;grid-template-columns:minmax(0,1fr) 36px;align-items:center;border-radius:9px;padding-right:.2rem}.folder-row-main{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.5rem;background:transparent;border:0;padding:.45rem .55rem;border-radius:8px}.folder-row-main:hover{background:#f2eee6}.folder-row.active .folder-row-main{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent)}.folder-row-name{text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.folder-row-count{color:#5f5a51;font-size:.86rem}.folder-toggle{width:30px;height:30px;padding:0;justify-self:end}.checkbox-inline{display:inline-flex;align-items:center;gap:.35rem}.checkbox-inline input{width:16px;height:16px}.breadcrumb{margin-top:.35rem}.processing-note{margin:.25rem 0 .45rem}.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.7rem;max-height:60vh;overflow-y:auto;overflow-x:hidden}.image-grid-wrap{position:relative}.image-grid-overlay{position:absolute;top:0;right:0;bottom:0;left:0;background:#f4f2ee94;display:grid;place-items:center;border-radius:12px;pointer-events:none}.loading-chip{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border:1px solid #cfc7b8;border-radius:999px;background:#fffaf3f5;color:#4d463a}.load-more-row{margin-top:.6rem;display:flex;justify-content:center}.image-tile{display:grid;gap:.4rem;padding:.35rem;min-width:0;overflow:hidden}.image-tile.skeleton{pointer-events:none}.image-tile img{width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:8px}.image-thumb-skeleton{width:100%;aspect-ratio:3 / 4;border-radius:8px}.image-label-skeleton{height:.95rem;border-radius:999px}.image-thumb-placeholder{width:100%;aspect-ratio:3 / 4;border-radius:8px;border:1px dashed #b9b2a3;background:repeating-linear-gradient(-45deg,#f0ece4,#f0ece4 10px,#e7e1d6 10px,#e7e1d6 20px);color:#6a6254;display:grid;place-items:center;font-size:.85rem}.image-tile.selected{outline:2px solid var(--accent);background:var(--accent-soft)}.image-tile span{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:left;font-size:.9rem}.folder-row.skeleton{padding:.1rem 0}.folder-row-skeleton{width:100%;height:2.5rem;border-radius:12px}.folder-row-count-wrap{display:inline-flex;align-items:center;gap:.35rem}.inline-spinner{width:.75rem;height:.75rem;border-radius:999px;border:2px solid #cfc7b8;border-top-color:var(--accent);animation:spinner-rotate .8s linear infinite}@keyframes spinner-rotate{to{transform:rotate(360deg)}}@keyframes skeleton-shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000059;display:grid;place-items:center;z-index:999}.modal-card{width:min(560px,92vw);background:var(--panel);border:2px solid #c4bcae;border-radius:14px;padding:1rem;display:grid;gap:.65rem}.manage-sets-modal{width:min(620px,92vw)}.manage-actions{display:flex;gap:.6rem;justify-content:flex-start}.session-end-modal{width:min(480px,88vw);text-align:center}.session-end-modal .actions-inline{justify-content:center}.muted{margin:0;color:#5f5a51;font-size:.9rem}.upload-progress{display:grid;gap:.35rem}.upload-progress-row{display:flex;justify-content:space-between;align-items:center;font-size:.92rem}.upload-progress progress{width:100%;height:12px}.upload-picker-row{display:grid;gap:.45rem}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}.timer-list{display:grid;gap:.5rem}.timer-row{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}.timer-row>input[type=number]{width:96px}.timer-row>select{width:132px}.timer-row>button{flex:0 0 auto}.sketch-count-group{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap;flex:0 0 auto}.sketch-count-group>input[type=number]{width:80px}.start-btn{margin-top:1rem;width:100%;background:var(--accent);color:#fff;border-color:var(--accent)}.start-btn:disabled{background:#b8b3a9;color:#f4f1eb;border-color:#b8b3a9;cursor:not-allowed}.start-btn:disabled:hover{border-color:#b8b3a9}.live-screen{grid-template-columns:3fr 1fr;height:calc(100dvh - 2rem);overflow:hidden;align-items:stretch}.viewer{display:grid;grid-template-columns:auto 1fr;grid-template-rows:minmax(0,1fr) auto;gap:.75rem;height:100%;min-height:0}.zoom-controls{display:grid;gap:.4rem;align-content:start}.zoom-controls.overlay-controls{position:absolute;top:.9rem;right:.9rem;z-index:30}.image-frame{position:relative;border:2px solid #b3ad9d;border-radius:14px;min-height:0;overflow:auto;display:grid;place-items:center;background:#faf8f5;height:100%}.image-frame.zoomed{cursor:grab;touch-action:none}.image-frame.zoomed.dragging{cursor:grabbing}.image-frame img{display:block;width:auto;height:auto;max-width:100%;max-height:100%;object-fit:contain}.live-image{opacity:0;visibility:hidden;transition:opacity .22s ease-in-out,visibility 0s linear .22s;-webkit-user-select:none;user-select:none}.live-image.ready{opacity:1;visibility:visible;transition:opacity .22s ease-in-out,visibility 0s}.live-image.current{position:relative;z-index:1}.live-image.previous{position:absolute;top:0;right:0;bottom:0;left:0;margin:auto;z-index:2;opacity:1;visibility:visible;pointer-events:none}.live-image.previous.fade-out{opacity:0}.pause-overlay{width:100%;height:100%;background:#00000080;color:#fff;font-size:4rem;font-weight:700;display:grid;place-items:center;z-index:20;pointer-events:none}.image-state-overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:20;pointer-events:none}.image-state-overlay .pause-overlay{position:relative}.image-overlay{position:absolute;z-index:30}.image-overlay-top{top:.9rem;left:50%;transform:translate(-50%)}.image-overlay-left{top:.9rem;left:.9rem}.next-sketch-card{margin-top:.75rem;padding:.75rem .9rem;border:1px solid #cfc7b2;border-radius:12px;background:#f7f2e7}.next-sketch-heading{display:block;font-size:.82rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#6a665c;margin-bottom:.2rem}.next-sketch-label{font-size:1rem;line-height:1.3;margin:0}.controls{grid-column:1 / -1;display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem}.mobile-actions-trigger{width:3rem;height:3rem;border-radius:999px;background:#faf8f5f0;border:1px solid rgba(99,90,71,.18);box-shadow:0 10px 26px #3a2e1824;display:grid;place-items:center;gap:.22rem;padding:.72rem;cursor:pointer}.mobile-actions-trigger span{display:block;width:100%;height:2px;border-radius:999px;background:#3c3425}.mobile-actions-sheet{display:none;margin-top:.55rem;min-width:12rem;padding:.5rem;border-radius:14px;background:#faf8f5f5;border:1px solid rgba(99,90,71,.18);box-shadow:0 18px 34px #3a2e1829;gap:.45rem}.mobile-actions-sheet.open{display:grid}.mobile-actions-sheet button{width:100%}.timers{height:100%;min-height:0;overflow:hidden}.session-timers{display:grid;gap:.8rem}.session-timer-block h2{margin:0 0 .15rem}.session-timer-block p{font-size:clamp(1.6rem,2.2vw,2.2rem);margin:0}.image-timers-mobile{display:none}.session-timers.compact{grid-auto-flow:column;gap:.5rem}.session-timers.compact .session-timer-block{min-width:0;padding:.45rem .65rem;border-radius:12px;text-align:center;background:#faf8f5f0;border:1px solid rgba(99,90,71,.16);box-shadow:0 10px 24px #3a2e181f}.session-timers.compact .session-timer-block h2{margin-bottom:.1rem;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase}.session-timers.compact .session-timer-block p{font-size:clamp(1rem,4vw,1.3rem)}@media(max-width:1024px){.setup-screen,.live-screen,.manage-grid,.finder-browser{grid-template-columns:1fr}.folder-tree-list{max-height:30vh}.live-screen{height:auto;overflow:auto}.viewer,.timers{height:auto}}@media(max-width:820px),(max-aspect-ratio:4/3){.live-screen{padding:.75rem}.viewer{grid-template-columns:1fr;gap:0}.viewer.card{padding:.65rem}.image-frame{min-height:min(72dvh,34rem)}.controls,.timers{display:none}.image-timers-mobile{display:block}.next-sketch-card{display:none}}