:root,:root[data-theme=dark]{--bg:#0e0f12;--bg-elev:#171a1f;--panel:#1f232b;--text:#e8eef7;--text-dim:#aab2bf;--text-muted:#6b7280;--primary:#5b9cff;--accent:#64d2b4;--danger:#ff6b6b;--border:#2c3340}:root[data-theme=light]{--bg:#f5f7fa;--bg-elev:#fff;--panel:#f9fafb;--text:#1a1d23;--text-dim:#4b5563;--text-muted:#9ca3af;--primary:#3b82f6;--accent:#10b981;--danger:#ef4444;--border:#e5e7eb}*{box-sizing:border-box}#__next,body,html{height:100%}body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,Helvetica Neue,Arial,Apple Color Emoji,Segoe UI Emoji}a{color:var(--primary);text-decoration:none}.app{display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto 1fr;grid-gap:8px;gap:8px;height:100vh;padding:8px;overflow:hidden}.col-right{order:3}.col-middle{order:2}.col-left{order:1}.header{grid-column:1/4;padding:8px 12px;background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}.desktop-tabs{display:none;gap:4px}.col{height:100%;gap:8px}.col,.panel{display:flex;flex-direction:column}.panel{background:var(--bg-elev);border:1px solid var(--border);border-radius:8px;overflow:hidden;min-height:0;flex-shrink:0}.section-title{padding:10px 12px;border-bottom:1px solid var(--border);font-weight:600;flex-shrink:0}.panel>div:not(.section-title):not(.tabs):not(.toolbar){overflow-y:auto;overflow-x:hidden;min-height:0}.toolbar{display:flex;gap:8px;align-items:center;width:100%}.button{background:var(--panel);border:1px solid var(--border);color:var(--text);padding:8px 12px;border-radius:8px;cursor:pointer;height:36px;font-size:14px}.button.primary{background:var(--primary);border-color:#3f7fe8;color:#fff}.button.ghost{background:transparent}.button.danger{background:var(--danger);border-color:#d95c5c;color:#fff}.button:disabled{opacity:.6;cursor:not-allowed}.tabs{display:flex;align-items:flex-end;gap:8px;padding:0 8px 0 0;flex-shrink:0}.tabs .button{margin-bottom:6px}.tab{padding:10px 12px;border-radius:8px 8px 0 0;cursor:pointer;color:var(--text-dim);border:solid transparent;border-width:1px 1px 2px}.tab.active{color:var(--text);border-color:var(--border);background:var(--bg-elev);border-bottom-color:var(--primary)}.tabs+.panel{border-radius:0 8px 8px 8px}.grid{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:8px;gap:8px;padding:8px;overflow:auto;align-content:start;grid-auto-rows:min-content}.col>.grid{flex:1 1;min-height:0}.tile{position:relative;border-radius:8px;overflow:hidden;border:1px solid var(--border);cursor:pointer;background:#0a0b0e;aspect-ratio:1/1}.tile img,.tile video{width:100%;height:100%;object-fit:contain;object-position:center center;display:block}.editor .grid .tile img{object-position:top center}.app>.col:nth-child(2) .tile{aspect-ratio:1/1}.app>.col:nth-child(2) .tile img{object-position:center top}.tile .badge{position:absolute;top:6px;left:6px;background:rgba(0,0,0,.5);padding:4px 6px;border-radius:4px;font-size:12px}.tile .actions{position:absolute;bottom:6px;left:6px;right:6px;display:flex;gap:6px}.editor{padding:12px;display:flex;flex-direction:column;gap:10px;height:100%}.editor textarea{width:100%;min-height:3em;resize:vertical;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:10px;font-size:14px;line-height:1.5}.editor .row,.panel .row{display:flex;gap:8px;align-items:center}.editor input[type=file],.editor input[type=text],.editor select{background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:8px;padding:8px 12px;height:36px;font-size:14px}.editor .chips{display:flex;gap:6px;flex-wrap:wrap}.chip{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:4px 8px;font-size:12px}.col{min-height:0}.viewer{display:flex;flex-direction:column;height:100%;min-height:0}.viewer .image-wrap{background:#0a0b0e;box-sizing:border-box}.preview-wrapper,.viewer .image-wrap{display:flex;align-items:center;justify-content:center;position:relative;height:100%}.preview-wrapper{flex-direction:column;gap:8px;padding:8px}.viewer img{max-height:100%;height:100%}.viewer img,.viewer video{max-width:100%;object-fit:contain}.viewer video{max-height:calc(100% - 100px);flex-shrink:0}.viewer .image-overlay{position:absolute;top:8px;right:8px;display:flex;gap:6px;opacity:0;transition:opacity .15s ease}.viewer .image-wrap:hover .image-overlay{opacity:1}.viewer .outputs{max-height:40vh;overflow:auto}.viewer textarea{padding:10px}.panel .grid{flex:1 1;overflow:auto}.tile .close{position:absolute;top:6px;right:6px;background:rgba(0,0,0,.55);border:1px solid var(--border);color:#fff;border-radius:6px;width:22px;height:22px;display:grid;place-items:center;font-size:12px;cursor:pointer}.muted{color:var(--text-dim)}.dropdown,select{appearance:none;-webkit-appearance:none;-moz-appearance:none;background-color:var(--panel);padding:8px 36px 8px 12px;height:36px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23999999' d='M5.5 7.5l4.5 4.5l4.5-4.5z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center}.dropdown,input[type=file],input[type=number],input[type=text],select,textarea{border:1px solid var(--border);color:var(--text);border-radius:8px;font-size:14px}input[type=file],input[type=number],input[type=text],textarea{background:var(--panel)}input[type=file],input[type=number],input[type=text]{padding:8px 12px;height:36px}.trainer{display:flex;flex-direction:column;gap:10px;padding:12px}.trainer .canvas-wrap{position:relative;width:100%;height:100px;background:#0a0b0e;border:1px solid var(--border);overflow:hidden}.trainer canvas{width:100%;height:100%;display:block}.trainer .progress{height:8px;background:var(--panel);border:1px solid var(--border);border-radius:999px;overflow:hidden}.trainer .progress .bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));width:0;transition:width .25s linear}.trainer .row{display:flex;gap:8px;align-items:center}.kicker{text-transform:uppercase;letter-spacing:.06em;font-size:11px;color:var(--text-dim)}.button svg{margin-right:6px;vertical-align:middle}.icon-button{width:28px;height:28px;padding:0;display:grid;place-items:center;border-radius:6px}.icon-button svg{margin-right:0}.icon-button.active{background:rgba(100,210,180,.14);border-color:#3f7fe8}.spacer{flex:1 1}.viewer-mobile{display:none;height:auto}@media (max-width:900px){.app{grid-template-columns:1fr;grid-template-rows:min-content 40vh min-content auto min-content;height:100vh;height:100dvh;padding:0;gap:0;overflow:hidden}.col-left,.col-middle,.col-right{order:0}.col{gap:0;overflow-y:auto;overflow-x:hidden;height:100%;padding-bottom:calc(57px + env(safe-area-inset-bottom))}.header{display:flex;flex-direction:column;position:-webkit-sticky;position:sticky;top:0;z-index:20;grid-column:1/-1;border-top:0;border-left:0;border-right:0;border-radius:0;flex-shrink:0}.desktop-tabs,.toolbar.name{display:none}.grid{grid-template-columns:repeat(2,minmax(0,1fr))}.button,.editor input[type=file],.editor input[type=text],.editor select,input[type=file],input[type=text],select,textarea{font-size:16px}.button,.editor input[type=file],.editor input[type=text],.editor select,input[type=number],select{height:40px}.viewer img{max-height:50vh}.viewer .outputs{max-height:none}.tabs{overflow-x:auto;-webkit-overflow-scrolling:touch}.viewer-mobile{display:block}.viewer-mobile .image-wrap{height:100%}.viewer-mobile img,.viewer-mobile video{max-width:calc(100% - 24px);max-height:calc(100% - 24px)}.app>.col,.projectname,.viewer-mobile .panel:first-of-type .section-title{display:none}.app[data-mobile-tab=library]{grid-template-rows:min-content auto}.app[data-mobile-tab=library]>.col-left{display:grid;height:100%;grid-template-rows:auto min-content;padding-bottom:57px!important;position:relative}.app[data-mobile-tab=library]>.col-left>.col{padding:0}.app[data-mobile-tab=library]>.col-right{display:none}.app[data-mobile-tab=image]>.col-left,.app[data-mobile-tab=image]>.col-middle,.app[data-mobile-tab=image]>.col-right,.app[data-mobile-tab=speak]>.col-left,.app[data-mobile-tab=speak]>.col-middle,.app[data-mobile-tab=speak]>.col-right,.app[data-mobile-tab=video]>.col-left,.app[data-mobile-tab=video]>.col-middle,.app[data-mobile-tab=video]>.col-right{display:flex}.col-right .panel:first-of-type .section-title{display:none}.panel{border-radius:0!important;border-left:none;border-right:none;height:100%}.panel>div:not(.section-title):not(.tabs):not(.toolbar){max-height:none}.mobile-tabs{position:fixed;left:0;right:0;bottom:0;display:flex;gap:0;background:var(--bg-elev);border-top:1px solid var(--border);padding:8px 8px calc(8px + env(safe-area-inset-bottom));z-index:30;height:calc(57px + env(safe-area-inset-bottom))}.mobile-tabs button{flex:1 1;height:40px;border-radius:0;border:1px solid var(--border);background:var(--panel);color:var(--text);font-size:14px}.mobile-tabs button.active{background:rgba(100,210,180,.14)}.mobile-tabs button svg{margin-right:6px;vertical-align:middle}.mobile-tabs button:first-child{border-radius:8px 0 0 8px}.mobile-tabs button:last-child{border-radius:0 8px 8px 0}}@media (max-width:520px){.grid{grid-template-columns:1fr}.col-left .grid,.viewer .grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:901px){.mobile-tabs,.viewer-mobile{display:none}.desktop-tabs{display:flex}}.video-controls-below{width:100%;max-width:600px;display:flex;flex-direction:column;gap:8px;background:var(--bg-elev);padding:12px;border-radius:8px;border:1px solid var(--border)}.video-actions-row,.video-controls-row{display:flex;align-items:center;gap:8px}.video-actions-row{justify-content:center}.video-seek-bar{flex:1 1;height:6px;border-radius:3px;background:var(--panel);border:1px solid var(--border);outline:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.video-seek-bar::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:14px;height:14px;border-radius:50%;background:var(--primary);cursor:pointer}.video-seek-bar::-moz-range-thumb{width:14px;height:14px;border-radius:50%;background:var(--primary);cursor:pointer;border:none}.video-time{font-size:13px;color:var(--text-dim);white-space:nowrap;min-width:85px;text-align:center}.share-page{min-height:100vh;background:var(--bg);color:var(--text);display:flex;flex-direction:column}.share-header{background:var(--bg-elev);border-bottom:1px solid var(--border);padding:16px 24px}.share-header .logo{display:flex;align-items:center;gap:8px}.share-header .logo img{width:32px;height:32px}.share-container{max-width:800px;margin:0 auto;padding:24px;width:100%}.share-video-wrapper{background:#0a0b0e;border-radius:12px;overflow:hidden;border:1px solid var(--border);margin-bottom:20px}.share-video-wrapper video{width:100%;display:block;max-height:60vh;object-fit:contain}.share-video-controls{padding:16px;background:var(--bg-elev)}.share-controls-row{display:flex;align-items:center;gap:12px}.share-stats{display:flex;gap:20px;padding:16px 0;border-bottom:1px solid var(--border)}.share-stats .stat{display:flex;align-items:center;gap:8px;color:var(--text-dim);font-size:14px}.share-stats .stat svg{width:18px;height:18px}.share-actions{display:flex;gap:12px;padding:20px 0;border-bottom:1px solid var(--border)}.share-actions .button{display:flex;align-items:center;gap:8px}.share-cta{text-align:center;padding:40px 20px}.share-cta h2{margin:0 0 12px;font-size:28px}.share-cta p{color:var(--text-dim);margin:0 0 24px;font-size:16px}.error,.loading{text-align:center;padding:60px 20px;font-size:18px}.error{color:var(--danger)}@media (max-width:768px){.share-container{padding:16px}.share-actions{flex-direction:column}.share-actions .button{width:100%;justify-content:center}}.toast-container{position:fixed;top:80px;right:20px;z-index:10000;display:flex;flex-direction:column;gap:12px;max-width:400px;width:calc(100vw - 40px)}.toast{background:var(--panel);border:1px solid var(--border);border-radius:8px;padding:16px;box-shadow:0 4px 12px rgba(0,0,0,.3);display:flex;gap:12px;align-items:flex-start;animation:slideIn .3s ease-out}@keyframes slideIn{0%{transform:translateX(400px);opacity:0}to{transform:translateX(0);opacity:1}}@keyframes spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.toast-success{border-left:4px solid var(--accent)}.toast-error{border-left:4px solid var(--danger)}.toast-info{border-left:4px solid var(--primary)}.toast-content{flex:1 1;display:flex;flex-direction:column;gap:8px}.toast-link{background:transparent;border:none;color:var(--primary);cursor:pointer;padding:0;text-decoration:underline;font-size:14px;text-align:left}.toast-link:hover{color:var(--accent)}.toast-close{background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:20px;line-height:1;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.toast-close:hover{color:var(--text)}@media (max-width:768px){.toast-container{top:60px;right:10px;left:10px;width:calc(100vw - 20px);max-width:none}}