@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;700&display=swap";:root{--bg:#edf2f5;--bg-deep:#dde6ec;--ink-900:#152430;--ink-800:#243847;--ink-700:#415362;--ink-600:#5e7281;--ink-500:#728696;--accent-700:#846f38;--accent-600:#9c8850;--font-body:"Manrope", "Segoe UI", sans-serif;--font-display:"Space Grotesk", "Aptos", sans-serif;font-family:var(--font-body);color:var(--ink-800);background:radial-gradient(circle at top, #ffffffd6, transparent 38%), linear-gradient(180deg, var(--bg), var(--bg-deep));font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:500;line-height:1.5}*{box-sizing:border-box}html{min-height:100%}body{min-height:100vh;margin:0}button,input,textarea,select{font:inherit}button{font-family:var(--font-body)}img{max-width:100%;display:block}#root{min-height:100vh}.app-shell{flex-direction:column;gap:1.5rem;min-height:100vh;padding:1.5rem;display:flex}.topbar,.panel,.app-footer{-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);background:linear-gradient(#fffffff5,#f6f8fbeb),#ffffffeb;border:1px solid #2a3b4a1a;box-shadow:0 24px 80px #1d303d14}.topbar{border-radius:1.65rem;grid-template-columns:minmax(0,320px) 1fr auto;align-items:center;gap:1rem;padding:1.2rem 1.35rem;display:grid}.brand-lockup{align-items:center;gap:.9rem;display:flex}.brand-mark{color:#fbfaf7;background:linear-gradient(135deg,#21374a,#4a6d87);border-radius:1rem;justify-content:center;align-items:center;width:2.8rem;height:2.8rem;display:inline-flex;box-shadow:0 18px 32px #1a2a3a33}.brand-title,.footer-title,.artwork-name,.selected-layer-name{color:var(--ink-900);font-family:var(--font-display);letter-spacing:-.04em;margin:0;font-weight:700}.brand-title{font-size:1.15rem}.brand-copy,.panel-copy,.footer-copy,.selected-layer-copy,.artwork-source{color:var(--ink-500);margin:.2rem 0 0;font-size:.94rem;line-height:1.5}.status-pill{max-width:100%;color:var(--ink-700);text-align:center;background:#f7f9fbf5;border:1px solid #516c8024;border-radius:999px;justify-self:center;margin:0;padding:.72rem 1rem;font-size:.92rem}.topbar-actions,.canvas-toolbar,.tool-grid,.artwork-actions{align-items:center;gap:.75rem;display:flex}.primary-button,.secondary-button,.icon-button{font:inherit;cursor:pointer;border:0;border-radius:999px;transition:transform .18s,box-shadow .18s,background-color .18s,color .18s,border-color .18s,opacity .18s}.primary-button,.secondary-button{justify-content:center;align-items:center;gap:.5rem;min-height:2.9rem;padding:0 1.15rem;font-size:.95rem;font-weight:700;display:inline-flex}.primary-button{color:#fdfbf7;background:linear-gradient(135deg,#21374a,#45647b);box-shadow:0 18px 28px #1a2a3a29}.secondary-button{color:var(--ink-800);background:#ffffffeb;border:1px solid #2a3b4a1a}.secondary-button.compact{width:100%;min-height:2.65rem}.secondary-button.wide{width:100%}.secondary-button.danger,.icon-button.danger{color:#8c3b3b}.primary-button:hover,.secondary-button:hover,.icon-button:hover,.upload-tile:hover,.artwork-card:hover,.layer-row:hover,.layer-shell:hover{transform:translateY(-1px)}.primary-button:disabled,.secondary-button:disabled,.icon-button:disabled{opacity:.45;cursor:not-allowed;transform:none}.studio-grid{grid-template-columns:minmax(280px,330px) minmax(0,1fr);align-items:start;gap:1.25rem;display:grid}.panel,.app-footer{border-radius:1.75rem;padding:1.3rem}.panel-heading{flex-direction:column;gap:.4rem;margin-bottom:1.25rem;display:flex}.canvas-panel-heading{margin-bottom:1rem}.eyebrow{color:var(--accent-600);letter-spacing:.2em;text-transform:uppercase;margin:0;font-size:.76rem;font-weight:800}.panel h2{color:var(--ink-900);letter-spacing:-.05em;margin:.2rem 0 0;font-size:clamp(1.35rem,2vw,1.65rem);line-height:1.1}.error-panel--studio{grid-column:1/-1}.error-card{background:#fffafaf5;border:1px solid #8c3b3b24;border-radius:1.35rem;padding:1.15rem}.error-card--canvas{flex-direction:column;justify-content:center;min-height:20rem;display:flex}.error-title,.error-message{margin:0}.error-title{color:var(--ink-900);font-family:var(--font-display);letter-spacing:-.03em;font-size:1.1rem;font-weight:700}.error-message{color:#8c3b3b;margin-top:.55rem;line-height:1.5}.error-actions{flex-wrap:wrap;gap:.75rem;margin-top:1rem;display:flex}.upload-tile,.tip-card,.selected-layer-card,.empty-state{background:#f9fafceb;border:1px solid #2a3b4a1a;border-radius:1.35rem}.upload-tile{cursor:pointer;align-items:center;gap:.95rem;margin-bottom:1rem;padding:1rem;display:flex}.upload-tile-bottom{margin-top:1rem;margin-bottom:0}.place-order-button{color:#111;width:100%;min-height:3.15rem;font:inherit;cursor:pointer;background:linear-gradient(#79df6b,#5fc94f);border:0;border-radius:1rem;justify-content:center;align-items:center;margin-top:.85rem;font-weight:800;text-decoration:none;transition:transform .18s,box-shadow .18s,filter .18s;display:inline-flex;box-shadow:0 16px 26px #5fc94f3d}.place-order-button:hover{filter:brightness(1.02);transform:translateY(-1px)}.upload-tile strong{color:var(--ink-900);font-size:.95rem;display:block}.upload-tile small{color:var(--ink-500);margin-top:.2rem;line-height:1.45;display:block}.upload-icon,.tip-card svg{width:2.6rem;height:2.6rem;color:var(--accent-700);background:#c9ba9533;border-radius:.95rem;justify-content:center;align-items:center;display:inline-flex}.artwork-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.9rem;display:grid}.library-section+.library-section{margin-top:1.15rem}.library-section-header{justify-content:space-between;align-items:center;gap:.8rem;margin-bottom:.85rem;display:flex}.library-section-header h3{color:var(--ink-900);font-family:var(--font-display);letter-spacing:-.03em;margin:0;font-size:1rem}.library-section-header span{color:var(--ink-500);font-size:.86rem}.artwork-card{background:#ffffffe6;border:1px solid #2a3b4a14;border-radius:1.35rem;padding:.8rem;box-shadow:0 18px 30px #1d303d0d}.artwork-preview{aspect-ratio:1;background:radial-gradient(circle at top,#c9ba953d,#0000 62%),linear-gradient(#fafbfcf2,#f1f4f7fa);border-radius:1rem;place-items:center;display:grid;overflow:hidden}.artwork-preview-button{cursor:pointer;border:0;width:100%;padding:0}.artwork-preview img,.selected-layer-preview img{object-fit:contain;width:76%;height:76%}.artwork-image--microphone{object-position:center 36%}.artwork-meta{justify-content:space-between;align-items:flex-start;gap:.75rem;margin-top:.75rem;display:flex}.artwork-text{flex:1;min-width:0}.artwork-name{overflow-wrap:anywhere;font-size:.98rem}.artwork-actions{flex-shrink:0}.icon-button{width:2.2rem;height:2.2rem;color:var(--ink-800);background:#f4f7f9f5;justify-content:center;align-items:center;display:inline-flex}.pagination-controls,.pagination-pages{align-items:center;gap:.65rem;display:flex}.pagination-controls{flex-wrap:wrap;justify-content:center;margin-top:1rem}.pagination-pages{flex-wrap:wrap;justify-content:center}.pagination-page{width:2.4rem;height:2.4rem;color:var(--ink-800);font:inherit;cursor:pointer;background:#ffffffeb;border:1px solid #2a3b4a1a;border-radius:999px;font-weight:700;transition:transform .18s,box-shadow .18s,background-color .18s,color .18s,border-color .18s}.pagination-page:hover{transform:translateY(-1px)}.pagination-page.is-active{color:#fdfbf7;background:linear-gradient(135deg,#21374a,#45647b);border-color:#516c8059;box-shadow:0 14px 24px #1a2a3a24}.tip-card{color:var(--ink-700);gap:.9rem;margin-top:1rem;padding:.95rem 1rem;line-height:1.55;display:flex}.canvas-panel{flex-direction:column;display:flex}.stage-shell{background:radial-gradient(circle at top,#c9ba952e,#0000 55%),linear-gradient(#f2f5f8f5,#e9eff4f0);border-radius:1.5rem;place-items:center;padding:clamp(.8rem,2vw,1.2rem);display:grid;position:relative}.stage-backdrop{pointer-events:none;background:linear-gradient(#ffffffeb,#f3f7fae6),#ffffffd6;border-radius:1.35rem;position:absolute;inset:1.15rem 1.5rem}.stage-frame{aspect-ratio:1512/2016;isolation:isolate;width:min(100%,40rem);position:relative}.shorts-image{object-fit:cover;-webkit-user-select:none;user-select:none;pointer-events:none;border-radius:1.2rem;width:100%;height:100%;box-shadow:0 28px 46px #21374a2e}.layer-rnd{z-index:2}.layer-shell{cursor:move;touch-action:none;background:0 0;border:0;width:100%;height:100%;padding:0;display:block;position:relative}.layer-shell.is-selected:before{content:"";pointer-events:none;border:2px solid #465d706b;border-radius:1rem;position:absolute;inset:-.45rem;box-shadow:0 0 0 .25rem #c9ba9547}.rotate-handle{cursor:grab;touch-action:none;z-index:3;background:#fffffffa;border:1px solid #2a3b4a24;border-radius:999px;justify-content:center;align-items:center;width:2.4rem;height:2.4rem;padding:.35rem;transition:opacity .18s,transform .18s,box-shadow .18s;display:inline-flex;position:absolute;top:-2.75rem;right:-.1rem;box-shadow:0 14px 24px #1a2a3a29}.rotate-handle img{object-fit:contain;pointer-events:none;width:100%;height:100%}.layer-shell.is-rotating .rotate-handle{cursor:grabbing;box-shadow:0 18px 30px #1a2a3a38}.layer-shell.is-rotating,.layer-shell.is-rotating .layer-art{cursor:grabbing}.layer-art{object-fit:contain;pointer-events:none;filter:drop-shadow(0 14px 24px #1f323f1f);transform-origin:50%;width:100%;height:100%}.resize-handle{background:#fff;border:2px solid #516c80;border-radius:999px;box-shadow:0 8px 18px #1a2a3a29;width:.85rem!important;height:.85rem!important}.canvas-toolbar{grid-template-columns:repeat(4,minmax(0,1fr));align-items:stretch;gap:.65rem;margin-top:1rem;display:grid}.canvas-tool-button{gap:0;width:100%;min-height:3rem;padding:0;position:relative}.canvas-tool-button:after{content:attr(data-tooltip);color:#fbfaf7;white-space:nowrap;opacity:0;pointer-events:none;background:#21374af5;border-radius:.75rem;padding:.45rem .65rem;font-size:.82rem;font-weight:700;line-height:1;transition:opacity .18s,transform .18s;position:absolute;bottom:calc(100% + .55rem);left:50%;transform:translate(-50%)translateY(.2rem);box-shadow:0 18px 32px #1a2a3a33}.canvas-tool-button:hover:after,.canvas-tool-button:focus-visible:after{opacity:1;transform:translate(-50%)translateY(0)}.canvas-tool-button svg{width:1.05rem;height:1.05rem}.inspector-body{flex-direction:column;gap:1rem;display:flex}.selected-layer-card{grid-template-columns:5rem 1fr;gap:.95rem;padding:.95rem;display:grid}.selected-layer-preview{aspect-ratio:1;background:radial-gradient(circle at top,#c9ba953d,#0000 62%),linear-gradient(#fbfcfdfa,#f0f4f7fa);border-radius:1rem;place-items:center;display:grid}.selected-layer-name{font-size:1.05rem}.slider-field{color:var(--ink-700);flex-direction:column;gap:.45rem;font-size:.92rem;display:flex}.slider-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.8rem;display:grid}.slider-row strong{min-width:3.8rem;color:var(--ink-900);text-align:right}.slider-row input[type=range]{accent-color:#516c80;width:100%}.layer-stack{border-top:1px solid #2a3b4a14;margin-top:1.2rem;padding-top:1.1rem}.layer-stack-header{justify-content:space-between;align-items:center;margin-bottom:.85rem;display:flex}.layer-stack-header span{color:var(--ink-500);font-size:.86rem}.layer-list{flex-direction:column;gap:.7rem;display:flex}.layer-row{text-align:left;cursor:pointer;width:100%;color:var(--ink-800);background:#ffffffeb;border:1px solid #2a3b4a14;border-radius:1rem;grid-template-columns:auto 2.5rem minmax(0,1fr) auto;align-items:center;gap:.65rem;padding:.7rem .75rem;display:grid}.layer-row.is-active{border-color:#516c8059;box-shadow:0 0 0 .2rem #c9ba953d}.layer-row img{object-fit:contain;width:2.5rem;height:2.5rem}.layer-order{color:var(--ink-500);font-size:.8rem}.layer-label{text-overflow:ellipsis;white-space:nowrap;font-weight:600;overflow:hidden}.empty-state{color:var(--ink-600);padding:1rem;line-height:1.55}.app-footer{justify-content:space-between;align-items:center;gap:1rem;display:flex}.footer-title{font-size:1rem}.footer-copy code,.tip-card code{color:var(--ink-900);background:#c9ba9533;border-radius:999px;padding:.15rem .45rem;font-size:.85rem}@media (width<=1180px){.studio-grid{grid-template-columns:1fr}.canvas-panel{order:1}.library-panel{order:2}.inspector-panel{order:3}.app-footer{flex-direction:column;align-items:stretch}.app-footer .secondary-button{width:100%}}@media (width<=920px){.topbar{grid-template-columns:1fr;justify-items:stretch}.status-pill{justify-self:stretch}.topbar-actions{justify-content:stretch}.topbar-actions .secondary-button,.topbar-actions .primary-button{flex:1}}@media (width<=720px){.app-shell{padding:1rem}.panel,.app-footer,.topbar{border-radius:1.4rem;padding:1rem}.library-section-header{align-items:baseline;margin-bottom:.75rem}.library-section-header h3{font-size:.98rem}.library-section-header span{font-size:.82rem}.artwork-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}.artwork-card{border-radius:1.15rem;padding:.65rem}.artwork-preview{border-radius:.9rem}.artwork-meta{gap:.55rem;margin-top:.6rem}.artwork-name{font-size:.95rem}.artwork-source{font-size:.85rem}.canvas-toolbar{gap:.55rem}.canvas-tool-button{min-height:2.85rem}.canvas-tool-button:after{display:none}.pagination-controls{justify-content:center}}