:root{--indigo: #2c3e50;--teal: #1abc9c;--ash: #95a5a6;--light: #ecf0f1;--black: #111111;--panel: rgba(17, 17, 17, .82);--panel-soft: rgba(44, 62, 80, .35);--stroke: rgba(149, 165, 166, .3);--glow: rgba(26, 188, 156, .25);--mobile-toolbar-height: 72px;--mobile-header-height: 64px}*{box-sizing:border-box}body{margin:0;font-family:Poppins,Montserrat,sans-serif;color:#1f2d3d;background:#f5f7f9;min-height:100vh;overflow-x:hidden}.page{display:flex;flex-direction:column;min-height:100dvh}.topbar{display:flex;justify-content:space-between;align-items:center;padding:24px 48px 12px}.mobile-studio-header{display:none}.mobile-header-btn{width:38px;height:38px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:#ffffff26;color:#fff;font-size:24px;line-height:1;cursor:pointer}.brand{display:flex;flex-direction:column;gap:6px}.logo{font-family:Playfair Display,serif;font-size:28px;letter-spacing:1px}.tag{color:var(--ash);text-transform:uppercase;letter-spacing:3px;font-size:12px}.nav{display:flex;gap:12px}.nav-link{background:transparent;border:2px solid transparent;color:var(--black);padding:10px 18px;border-radius:999px;font-size:14px;cursor:pointer;transition:all .2s ease}.nav-link:hover,.nav-link.is-active{border-color:var(--teal);color:var(--teal);box-shadow:0 0 18px #1abc9c4d}.main{flex:1;padding:0 48px 48px}.view{animation:fadeUp .6s ease forwards}.hero{display:flex;flex-direction:column;align-items:center;gap:16px;padding:40px 0 28px;text-align:center}.hero-copy{max-width:980px;display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}.hero-copy h1{margin:0;max-width:none;font-size:clamp(1.95rem,3.8vw,3.4rem);color:#1f2d3d;line-height:1.12;letter-spacing:-.03em}.hero-title-line{display:block;white-space:nowrap}.hero-copy .lead{color:#4a5b6e;margin:0;max-width:680px;font-size:clamp(1rem,1.5vw,1.18rem);line-height:1.65}.hero-actions{display:flex;justify-content:center;margin-top:6px}.eyebrow{color:var(--teal);text-transform:none;letter-spacing:3px;font-size:12px;font-weight:600;margin:0}h1{margin:0 0 12px;font-size:38px}.lead{color:var(--ash);max-width:520px;line-height:1.6}.studio-grid{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:28px;align-items:start}.panel{background:#fff;border-radius:20px;padding:24px;border:1px solid #dfe6ee;box-shadow:0 10px 28px #00000014}.panel h2,.panel h3{margin:0 0 12px;color:#1f2d3d}.panel-header{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;margin-bottom:16px}.controls{display:flex;flex-direction:column;gap:16px}.controls-header{display:flex;justify-content:flex-start;align-items:center;gap:12px}.control-section{border-bottom:1px solid rgba(149,165,166,.25);padding-bottom:16px}.control-section:last-child{border-bottom:0;padding-bottom:0}.field{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;font-size:13px;color:#4a5b6e}.field input,.field select{padding:10px 12px;border-radius:12px;border:1px solid #dfe6ee;background:#fff;color:#1f2d3d;font-family:inherit}.field select option{background:#fff;color:#1f2d3d}.field select option:checked{background:var(--teal);color:var(--black)}.field select option:hover{background:#1abc9c26}.field input::placeholder{color:#9aa7b8}.row{display:flex;justify-content:space-between;align-items:center;gap:12px}.style-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.size-control{display:flex;align-items:center;gap:4px;background:#f7f9fb;border:1px solid #dfe6ee;border-radius:10px;padding:4px}.size-control input{width:64px;border:none;background:transparent;text-align:center;color:#1f2d3d;font-family:inherit;font-size:14px}.pill-btn{width:30px;height:30px;border-radius:8px;border:1px solid #000000;background:#fff;color:#1f2d3d;cursor:pointer}.pill-btn:hover{border-color:var(--teal);color:var(--teal)}.color-control{display:flex;align-items:center;gap:8px;flex-wrap:wrap}#color-picker{width:38px;height:38px;border:1px solid var(--stroke);border-radius:8px;background:transparent;cursor:pointer}.palette{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;background:#ecf0f10f;padding:6px;border-radius:10px;border:1px solid var(--stroke)}.palette button{width:22px;height:22px;border-radius:6px;border:1px solid rgba(0,0,0,.25);cursor:pointer}.palette button.is-active{box-shadow:0 0 0 2px var(--teal)}.align-row{display:flex;gap:8px;margin:12px 0}.align-btn{border:1px solid #dfe6ee;background:#fff;border-radius:10px;padding:10px 12px;cursor:pointer}.align-btn.is-active{border-color:var(--teal);background:#1abc9c1f}.align-icon{display:block;width:22px;height:14px;position:relative}.align-icon:before,.align-icon:after{content:"";position:absolute;left:0;right:0;height:2px;background:#1f2d3d}.align-icon:before{top:3px}.align-icon:after{bottom:3px}.align-icon.left{text-align:left}.align-icon.center:before,.align-icon.center:after{width:14px;left:4px;right:4px;margin:0 auto}.align-icon.right:before,.align-icon.right:after{width:12px;left:auto;right:2px}.hint{margin:-4px 0 12px;font-size:12px;color:var(--ash)}.button-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.history-button-grid{margin-top:10px}.canvas-panel{display:flex;flex-direction:column;gap:18px;height:var(--canvas-panel-height, auto);max-height:var(--canvas-panel-height, none)}.canvas-shell{display:flex;align-items:center;justify-content:center;flex:1 1 auto;min-height:0;overflow:hidden;position:relative;padding:16px;background:#fff;border-radius:16px;border:1px dashed #dfe6ee}.mockup-loading{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border-radius:inherit;background:#f7fafcd1;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s ease;z-index:4}.mockup-loading.is-active{opacity:1;pointer-events:auto}.mockup-loading-visual{position:relative;width:92px;height:120px;display:flex;align-items:center;justify-content:center}.mockup-loading-ring{position:absolute;border-radius:999px;animation:mockupPulse 1.8s ease-out infinite}.mockup-loading-ring-outer{width:88px;height:88px;background:radial-gradient(circle,#1abc9c33,#1abc9c00 72%)}.mockup-loading-ring-inner{width:66px;height:66px;background:radial-gradient(circle,#2c3e502e,#2c3e5000 74%);animation-delay:.2s}.mockup-loading-case{position:relative;width:52px;height:96px;border-radius:18px;background:linear-gradient(180deg,#32495f,#223244);border:2px solid rgba(255,255,255,.82);box-shadow:0 0 0 1px #2c3e5014,0 12px 24px #2c3e502e,0 0 30px #1abc9c29;animation:mockupCaseFloat 1.5s ease-in-out infinite}.mockup-loading-case:before{content:"";position:absolute;top:5px;right:5px;bottom:5px;left:5px;border-radius:14px;background:linear-gradient(180deg,#fff,#f2f7fa)}.mockup-loading-case:after{content:"";position:absolute;top:10px;left:50%;width:14px;height:3px;border-radius:999px;background:#2c3e5033;transform:translate(-50%)}.mockup-loading-camera{position:absolute;top:10px;left:8px;width:22px;height:28px;border-radius:12px;background:linear-gradient(180deg,#182432,#0e1721);box-shadow:0 6px 14px #0a141e3d;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;align-items:center;justify-items:center;padding:4px}.mockup-loading-camera span{width:7px;height:7px;border-radius:999px;background:radial-gradient(circle at 35% 35%,#6ad7ff,#24384d 42%,#0e1721);box-shadow:inset 0 0 0 1px #ffffff14}.mockup-loading-camera span:nth-child(2){animation:mockupLensBlink 1.15s ease-in-out infinite alternate}.mockup-loading-label{font-size:13px;font-weight:600;color:var(--indigo);letter-spacing:.02em}.canvas-shell .canvas-container{max-width:100%;touch-action:none}.canvas-shell .canvas-container canvas{touch-action:none}#design-canvas{display:block;max-width:100%;border-radius:0;background:#fff;box-shadow:none;touch-action:none}.action-row{display:flex;flex-wrap:wrap;gap:12px}.action-row-primary .btn{min-height:48px;padding-inline:24px}.advanced-tools{border:1px solid rgba(149,165,166,.35);border-radius:14px;padding:12px;background:#ecf0f133}.advanced-tools summary{cursor:pointer;font-weight:600;color:var(--indigo);margin-bottom:8px}.advanced-tools[open] summary{margin-bottom:12px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 16px;border-radius:999px;border:1px solid transparent;font-family:inherit;font-size:14px;cursor:pointer;text-decoration:none;transition:all .2s ease}.hero-actions .btn{min-height:52px;padding:14px 28px;font-size:15px;font-weight:600}.btn.primary{background:var(--teal);color:var(--black)}.btn.secondary{background:#1abc9c26;border-color:var(--teal);color:var(--teal)}.btn.ghost{background:var(--teal);border-color:var(--teal);color:#fff}.btn:hover{transform:translateY(-1px);box-shadow:0 8px 16px #1abc9c33}.btn:disabled{background:var(--ash);border-color:var(--ash);color:#111;opacity:1;cursor:not-allowed;box-shadow:none;transform:none}.status{display:block;color:var(--teal);font-size:13px;width:100%;text-align:center;white-space:normal;overflow-wrap:anywhere;word-break:break-word}.mobile-select-btn{border:1px solid rgba(44,62,80,.25);background:#fff;color:var(--indigo);border-radius:999px;min-height:38px;padding:0 14px;font-size:13px;font-weight:600}.edit-select-row{margin-top:12px}.edit-select-row .mobile-select-btn{width:100%;min-height:44px}.result{font-size:13px;color:var(--ash)}.mobile-toolbar,.mobile-controls-backdrop[hidden]{display:none}.mobile-controls-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:49;background:#11111173}.cart-grid{display:grid;grid-template-columns:minmax(220px,320px) 1fr;gap:24px}.cart-preview{background:#f7f9fb;border-radius:16px;display:flex;align-items:center;justify-content:center;padding:18px;min-height:420px;border:1px solid #dfe6ee}.cart-preview img{max-width:100%;max-height:100%;object-fit:contain;border-radius:18px;box-shadow:0 8px 24px #00000026}.meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:16px}.meta span{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--black)}.meta strong{display:block;margin-top:4px}.json-view{background:#ecf0f10a;padding:12px 16px;border-radius:12px;border:1px solid var(--stroke);max-height:280px;overflow:auto;margin-bottom:16px}.json-view pre{white-space:pre-wrap;font-size:12px;color:var(--light)}.orders-list{display:grid;gap:16px}.order-card{border-radius:16px;border:1px solid var(--stroke);padding:18px;background:#ecf0f10d}.order-card h3{margin:0 0 12px}.order-items{display:grid;gap:12px}.order-item{display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;padding:12px;border-radius:12px;background:#1119}.order-item span{color:var(--ash);font-size:12px}.footer{padding:24px 48px 40px;color:var(--ash);font-size:12px}@keyframes fadeUp{0%{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}@keyframes mockupPulse{0%{transform:scale(.82);opacity:0}35%{opacity:1}to{transform:scale(1.18);opacity:0}}@keyframes mockupCaseFloat{0%,to{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.02)}}@keyframes mockupLensBlink{0%{transform:scale(1);filter:brightness(1)}to{transform:scale(1.12);filter:brightness(1.18)}}@media (max-width: 1100px){.studio-grid{grid-template-columns:1fr}}@media (max-width: 900px){body.is-studio-route{overflow:hidden}body.is-studio-route .page{min-height:100dvh;height:100dvh;overflow:hidden}body.mobile-controls-open{overflow:hidden}.mobile-studio-header{display:none}.topbar{position:sticky;top:0;z-index:40;flex-direction:column;align-items:flex-start;gap:12px;padding:12px 16px;background:#f5f7f9f2;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid #dfe6ee}.nav{width:100%;gap:8px}.nav-link{flex:1;text-align:center;min-height:42px}.main{padding:0 6px calc(var(--mobile-toolbar-height) + 24px)}.hero,body.is-studio-route .topbar{display:none}body.is-studio-route .main{padding:0;height:100dvh;overflow:hidden}body.is-studio-route #view-studio{width:100%;max-width:100%;margin:0;min-height:100%;height:100%;display:flex;flex-direction:column;min-width:0}body.is-studio-route .mobile-studio-header{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:var(--mobile-header-height);padding:10px 12px;margin-bottom:0;position:relative;top:auto;z-index:56;color:#fff;background:linear-gradient(135deg,#2c3e50,#1f4e79);box-shadow:0 10px 24px #11111138;border-bottom-left-radius:14px;border-bottom-right-radius:14px;flex:0 0 auto}body.is-studio-route .mobile-studio-header h2{margin:0;font-size:19px;line-height:1.2;letter-spacing:.2px;text-align:center;flex:1}body.is-studio-route .studio-grid{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;max-width:100%}.studio-grid{display:block}.canvas-panel{gap:10px;margin:0 -4px 8px;padding:10px 8px 12px;height:auto;max-height:none;background:transparent;border:0;box-shadow:none}.panel{padding:14px;border-radius:16px}body.is-studio-route .canvas-panel.panel{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none}.canvas-panel .panel-header{margin-bottom:6px;flex-direction:column;align-items:flex-start;gap:4px}.canvas-panel .panel-header .hint{display:none}.canvas-panel .status{width:100%;min-height:16px;font-size:12px;line-height:1.35;margin:0 0 6px;text-align:center}body.is-studio-route .canvas-panel{display:flex;flex-direction:column;flex:1;min-height:0;min-width:0;width:100%;max-width:100%;gap:8px;margin:0;padding:8px 4px calc(var(--mobile-toolbar-height) + 10px);padding:8px 4px calc(var(--mobile-toolbar-height) + env(safe-area-inset-bottom) + 10px)}body.is-studio-route .canvas-panel .panel-header{margin:0;display:block;align-items:center}body.is-studio-route .canvas-panel .panel-header>div:first-child{display:none}body.is-studio-route .canvas-panel .panel-header h2,body.is-studio-route .canvas-panel .panel-header .hint{display:none}body.is-studio-route .canvas-panel .status{display:block;box-sizing:border-box;position:relative;align-self:stretch;flex:0 0 auto;height:auto;width:100%;max-width:100%;min-width:0;min-height:18px;font-size:clamp(10px,2.7vw,11px);line-height:1.25;margin:0;padding:0 8px 8px;background:linear-gradient(to bottom,#f5f7f9,#f5f7f9 88%,#f5f7f900);text-align:center;white-space:nowrap;overflow-wrap:anywhere;word-break:break-word;overflow:visible;pointer-events:none}body.is-studio-route .action-row-primary{display:none}.canvas-shell{padding:2px;min-height:clamp(360px,56dvh,640px);border-style:solid;border-color:#95a5a659;background:#f4f7fa}body.is-studio-route .canvas-shell{flex:1;min-height:0;min-width:0;width:100%;max-width:100%;align-items:flex-start;justify-content:center;padding:2px;height:auto;overflow:hidden;border-style:solid;border-color:#95a5a647;border-radius:18px;background:#f7fafc}.mockup-loading{gap:10px;background:#f7fafce0}.mockup-loading-visual{width:84px;height:108px}.mockup-loading-ring-outer{width:80px;height:80px}.mockup-loading-ring-inner{width:60px;height:60px}.mockup-loading-case{width:48px;height:88px}.mockup-loading-label{font-size:12px}body.is-studio-route .canvas-shell .canvas-container{display:flex;justify-content:center;align-items:flex-start;flex:1 1 auto;min-width:0;width:100%;margin:0}body.is-studio-route.mobile-canvas-scroll-mode .canvas-shell{overflow-x:auto;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none;-ms-overflow-style:none}body.is-studio-route.mobile-canvas-scroll-mode .canvas-shell::-webkit-scrollbar{display:none}body.is-studio-route.mobile-canvas-scroll-mode .canvas-shell .canvas-container{width:max-content;min-width:100%}body.is-studio-route.mobile-canvas-scroll-mode .canvas-shell .canvas-container,body.is-studio-route.mobile-canvas-scroll-mode .canvas-shell .canvas-container canvas{touch-action:none}.controls{position:fixed;left:8px;right:8px;left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);width:auto;bottom:calc(var(--mobile-toolbar-height) + 12px);bottom:calc(var(--mobile-toolbar-height) + env(safe-area-inset-bottom) + 12px);max-height:72dvh;overflow-y:auto;z-index:50;transform:translateY(calc(100% + 24px));opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease;box-shadow:0 18px 45px #00000040}body.mobile-controls-open .controls{transform:translateY(0);opacity:1;pointer-events:auto}.controls-header{position:sticky;top:0;z-index:2;margin:-16px -16px 10px;padding:14px 16px 10px;background:#fff;border-bottom:1px solid rgba(149,165,166,.2)}.control-section{display:none;border-bottom:1px solid rgba(149,165,166,.25);margin-bottom:14px;padding-bottom:14px}.controls[data-mobile-group=image] .control-section[data-mobile-group=image],.controls[data-mobile-group=text] .control-section[data-mobile-group=text],.controls[data-mobile-group=color] .control-section[data-mobile-group=color]{display:block}.row .btn,.action-row-primary .btn{width:100%;min-height:52px;font-size:15px}.advanced-tools summary{font-size:13px}.mobile-toolbar{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;position:fixed;left:8px;right:8px;left:calc(env(safe-area-inset-left) + 8px);right:calc(env(safe-area-inset-right) + 8px);width:auto;bottom:8px;bottom:calc(env(safe-area-inset-bottom) + 8px);transform:none;z-index:55;padding:8px;border-radius:16px;border:1px solid rgba(44,62,80,.2);background:#ecf0f1f5;box-shadow:0 10px 24px #1113}.mobile-tool-btn{min-height:50px;border-radius:12px;border:1px solid rgba(44,62,80,.3);background:#fff;color:var(--indigo);font-family:inherit;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;line-height:1.1}.mobile-tool-btn:disabled{opacity:.45;cursor:not-allowed}.mobile-tool-icon{width:16px;height:16px;display:inline-flex;align-items:center;justify-content:center}.mobile-tool-icon svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.mobile-tool-label{letter-spacing:.1px}.mobile-tool-btn.is-active{border-color:var(--teal);background:#1abc9c26;color:#0f3f37}.cart-grid{grid-template-columns:1fr}.cart-preview{min-height:0;height:min(62dvh,560px);align-items:center;justify-content:center;padding:12px}.cart-preview img{width:auto;height:auto;max-width:100%;max-height:100%;display:block;object-fit:contain}.meta{grid-template-columns:1fr}.footer{padding:20px 16px calc(var(--mobile-toolbar-height) + 18px)}body.is-studio-route .footer{display:none}}@media (max-width: 600px){.button-grid{grid-template-columns:1fr}.action-row{flex-direction:column}.size-control input{width:72px;font-size:16px}.pill-btn{width:36px;height:36px}.align-btn{min-height:42px;min-width:56px}.palette button{width:26px;height:26px}}