:root{--color-primary: #df7655;--color-primary-hover: #c65f43;--color-accent: #d8b978;--color-surface-dark: rgb(75 64 56 / 94%);--color-surface-dark-alt: rgb(58 50 44 / 96%);--color-surface-light: #fbf7ef;--color-surface-card: rgb(255 252 246 / 78%);--color-text: #1a1714;--color-text-muted: #8a7e72;--color-text-light: rgb(255 248 239 / 90%);--color-text-light-muted: rgb(255 248 239 / 50%);--color-border: rgb(0 0 0 / 6%);--color-border-light: rgb(255 255 255 / 10%);--radius-sm: 8px;--radius-md: 14px;--radius-lg: 20px;--radius-pill: 999px;--shadow-soft: 0 8px 30px rgb(88 64 42 / 8%);--shadow-elevated: 0 24px 70px rgb(78 53 34 / 14%);--shadow-card: 0 1px 3px rgb(78 53 34 / 5%), 0 14px 34px rgb(78 53 34 / 9%);--transition: .2s cubic-bezier(.4, 0, .2, 1);--font: "DM Sans", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;color:var(--color-text);background:var(--color-surface-light);font-family:var(--font);font-size:14px;line-height:1.5}*{box-sizing:border-box}html,body,#app{height:100%}body{margin:0;overflow:hidden}button,input{font:inherit}button{border:0;cursor:pointer;transition:all var(--transition)}button:disabled{cursor:not-allowed;opacity:.45}button:not(:disabled):active{transform:scale(.97)}.app-shell{background:linear-gradient(90deg,#fffaf2e5,#fffaf2 45%,#604e41),url(/assets/studio-bg-Ctlj-Kvn.png) center / cover no-repeat,linear-gradient(160deg,#fcf7ee,#eee3d6);display:grid;grid-template-rows:auto minmax(0,1fr);height:100vh;padding:18px;gap:18px;position:relative}.app-shell:before{background-image:radial-gradient(rgb(95 73 52 / 17%) 1px,transparent 1px);background-size:22px 22px;content:"";top:0;right:0;bottom:0;left:0;pointer-events:none;position:fixed;z-index:0}.app-shell>*{position:relative;z-index:1}.topbar{align-items:center;background:#fffdf8c2;-webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2);border:1px solid var(--color-border);border-radius:18px;box-shadow:var(--shadow-soft);display:grid;gap:16px;grid-template-columns:1fr auto auto;margin:0 auto;max-width:1440px;padding:10px 16px;width:100%}.brand{align-items:center;display:flex;gap:12px}.brand-mark{align-items:center;background:url(/assets/brand-icon-DK5OI1GU.png) center / cover no-repeat,linear-gradient(135deg,var(--color-primary),#d4785e);border-radius:10px;color:transparent;display:inline-flex;font-size:18px;font-weight:900;height:36px;justify-content:center;letter-spacing:-.5px;width:36px;box-shadow:0 2px 8px #c4644a4d}.brand strong{color:var(--color-text);display:block;font-size:15px;font-weight:700;letter-spacing:-.3px}.brand small{color:var(--color-text-muted);display:block;font-size:11px;font-weight:500}.project-meta{text-align:center}.project-meta strong{color:var(--color-text);display:block;font-size:13px;font-weight:700}.project-meta span{color:var(--color-text-muted);font-size:11px;font-weight:500}.save-action{background:var(--color-text);border-radius:var(--radius-pill);color:#fff;font-size:13px;font-weight:700;min-height:38px;padding:0 20px;letter-spacing:-.2px}.save-action:not(:disabled):hover{background:#000;box-shadow:0 4px 12px #0003;transform:translateY(-1px)}.workspace{display:grid;gap:16px;grid-template-columns:minmax(0,1fr) 384px;height:100%;margin:0 auto;max-width:1440px;min-height:0;width:100%}.canvas-shell,.side-panel{min-height:0}.canvas-shell{background:#fffdf7ad;-webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);border:1px solid rgb(120 88 58 / 12%);border-radius:20px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;height:100%;overflow:hidden;min-width:0}.canvas-toolbar{align-items:center;border-bottom:1px solid var(--color-border);display:flex;justify-content:space-between;min-height:58px;padding:0 22px}.canvas-toolbar span{color:var(--color-text-muted);display:block;font-size:11px;font-weight:700;letter-spacing:.3px;text-transform:uppercase}.canvas-toolbar strong{color:var(--color-text);font-size:13px}.canvas-toolbar p{background:#b8965a1a;border:1px solid rgb(184 150 90 / 20%);border-radius:var(--radius-pill);color:#7a5f2a;font-size:12px;font-weight:500;margin:0;padding:6px 14px}.canvas-stage{align-items:center;background:radial-gradient(circle at 50% 50%,rgb(255 255 255 / 45%),transparent 52%),linear-gradient(180deg,#fff3,#efe2d33d);display:flex;flex:1;justify-content:center;min-height:0;overflow:hidden;padding:22px}.paper{background:linear-gradient(#fffdf8,#fffdf8) padding-box,linear-gradient(135deg,#d8b97873,#fff,#df7655) border-box;border:1px solid transparent;border-radius:16px;box-shadow:0 22px 80px #5e442d26,inset 0 1px #fffc;max-height:100%;max-width:100%;overflow:auto;padding:14px}.pattern-board{display:grid;gap:0;margin:0 auto;max-height:calc(100vh - 160px);max-width:calc(100vw - 500px);width:min(calc(100vw - 500px),calc(100vh - 170px))}.pattern-board span{aspect-ratio:1;border:.5px solid rgb(0 0 0 / 20%);min-height:0;min-width:0}.pattern-board span.empty{background:linear-gradient(135deg,transparent 48%,rgb(80 80 80 / 7%) 49%,rgb(80 80 80 / 7%) 51%,transparent 52%),#fffdfa;border-color:#0000000f}.empty-pattern{align-items:center;color:#9a8b7d;display:grid;gap:16px;justify-items:center;min-height:400px;min-width:420px;text-align:center;padding:40px}.empty-pattern strong{color:var(--color-text);font-size:18px;font-weight:700;letter-spacing:-.3px}.empty-pattern small{color:var(--color-text-muted);font-size:13px}.empty-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,#df765524,#d8b9782e);display:flex;align-items:center;justify-content:center;font-size:28px}.sample-grid{display:grid;gap:3px;grid-template-columns:repeat(10,12px);margin-bottom:12px;opacity:.6}.sample-grid span{aspect-ratio:1;background:#e8e2da;border-radius:2px}.sample-grid span:nth-child(3n){background:var(--color-primary);opacity:.7}.sample-grid span:nth-child(4n){background:var(--color-accent);opacity:.7}.sample-grid span:nth-child(7n){background:var(--color-text);opacity:.5}.side-panel{align-content:start;display:grid;gap:12px;height:100%;overflow-y:auto;min-width:0;padding-right:6px;scrollbar-width:thin;scrollbar-color:rgb(255 255 255 / 15%) transparent}.panel-card{background:linear-gradient(180deg,rgb(255 255 255 / 7%),transparent 38%),var(--color-surface-dark);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-border-light);border-radius:18px;box-shadow:var(--shadow-elevated);color:var(--color-text-light);padding:22px;animation:fadeInUp .4s ease both}.panel-card:nth-child(2){animation-delay:.05s}.panel-card:nth-child(3){animation-delay:.1s}.panel-card:nth-child(4){animation-delay:.15s}@keyframes fadeInUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.panel-title{align-items:center;display:flex;gap:12px;margin-bottom:16px}.panel-title span{align-items:center;background:#fff6eb29;border:1px solid rgb(255 255 255 / 12%);border-radius:50%;color:#fff;display:inline-flex;font-size:11px;font-weight:900;height:28px;justify-content:center;width:28px}.panel-title h2{font-size:15px;font-weight:700;margin:0;letter-spacing:-.2px}.panel-title small{color:var(--color-text-light-muted);margin-left:auto;font-size:12px;font-weight:500}.upload-preview{align-items:center;background:#ffffff0a;border:1.5px dashed rgb(255 255 255 / 15%);border-radius:14px;color:var(--color-text-light-muted);cursor:pointer;display:flex;justify-content:center;min-height:152px;overflow:hidden;transition:all var(--transition);font-size:13px;font-weight:500}.upload-preview:hover{border-color:var(--color-primary);background:#c4644a0d}.upload-preview.filled{border-style:solid;border-color:#ffffff1a}.upload-preview input{display:none}.upload-preview img{height:172px;object-fit:cover;width:100%}.preset-grid{display:grid;gap:8px;grid-template-columns:1fr 1fr}.preset-grid button{background:#ffffff0d;border:1px solid rgb(255 255 255 / 8%);border-radius:14px;color:var(--color-text-light-muted);display:grid;gap:4px;padding:12px;text-align:left}.preset-grid button:hover{border-color:var(--color-primary);background:#c4644a14;transform:translateY(-1px);box-shadow:0 4px 12px #c4644a26}.preset-grid strong{color:var(--color-text-light);font-size:13px}.preset-grid span{font-size:11px}.estimate-box{background:#231d1966;border:1px solid rgb(255 255 255 / 6%);border-radius:14px;display:grid;gap:6px 12px;grid-template-columns:1fr auto;margin:14px 0;padding:14px}.estimate-box span{color:var(--color-text-light-muted);font-size:11px;font-weight:500}.estimate-box strong{color:var(--color-text-light);font-size:13px}.control{display:grid;gap:8px;margin:14px 0}.control>span{color:var(--color-text-light);font-size:13px;font-weight:700}.control em{color:var(--color-text-light-muted);font-size:11px;font-style:normal}.range-control{align-items:center;display:grid;gap:10px;grid-template-columns:1fr 64px}.range-control input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:#ffffff1a;border-radius:4px;height:4px;outline:none}.range-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--color-primary);border:2px solid #fff;border-radius:50%;cursor:pointer;height:16px;width:16px;box-shadow:0 2px 6px #c4644a66;transition:transform var(--transition)}.range-control input[type=range]::-webkit-slider-thumb:hover{transform:scale(1.2)}.range-control input[type=number]{background:#ffffff0f;border:1px solid rgb(255 255 255 / 10%);border-radius:6px;color:var(--color-text-light);font-size:13px;font-weight:700;outline:none;padding:8px;text-align:center;transition:border-color var(--transition)}.range-control input[type=number]:focus{border-color:var(--color-primary)}.switch-row{align-items:center;background:#ffffff0a;border:1px solid rgb(255 255 255 / 6%);border-radius:14px;display:grid;gap:12px;grid-template-columns:1fr auto;margin:10px 0;padding:12px;transition:background var(--transition)}.switch-row:hover{background:#ffffff0f}.switch-row span{display:grid;gap:2px}.switch-row strong{color:var(--color-text-light);font-size:13px;font-weight:600}.switch-row em{color:var(--color-text-light-muted);font-size:11px;font-style:normal}.toggle{position:relative;width:40px;height:22px;cursor:pointer}.toggle input{opacity:0;width:0;height:0;position:absolute}.toggle-track{position:absolute;top:0;right:0;bottom:0;left:0;background:#ffffff1f;border-radius:11px;transition:background var(--transition)}.toggle input:checked+.toggle-track{background:var(--color-primary)}.toggle-track:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;background:#fff;border-radius:50%;transition:transform var(--transition);box-shadow:0 1px 3px #0003}.toggle input:checked+.toggle-track:after{transform:translate(18px)}.segmented{background:#0003;border-radius:15px;display:grid;grid-template-columns:1fr 1fr;margin-top:12px;padding:3px}.segmented button{background:transparent;border-radius:6px;color:var(--color-text-light-muted);font-size:13px;font-weight:700;padding:9px}.segmented .selected{background:#ffffff1f;color:var(--color-text-light);box-shadow:0 1px 4px #00000026}.primary-action{background:linear-gradient(135deg,#ec8461,#d76749);border-radius:14px;color:#fff;font-size:14px;font-weight:700;letter-spacing:-.2px;margin-top:16px;box-shadow:0 10px 24px #d767493d;min-height:48px;width:100%}.primary-action:not(:disabled):hover{background:var(--color-primary-hover);box-shadow:0 4px 16px #c4644a59;transform:translateY(-1px)}.generating{position:relative;overflow:hidden}.generating:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(90deg,transparent,rgb(255 255 255 / 20%),transparent);animation:shimmer 1.5s infinite}@keyframes shimmer{0%{transform:translate(-100%)}to{transform:translate(100%)}}.colors .panel-title,.saved .panel-title{margin-bottom:12px}.color-row{align-items:center;display:grid;gap:10px;grid-template-columns:32px 1fr auto auto;padding:8px 0;border-bottom:1px solid rgb(255 255 255 / 4%)}.color-row:last-child{border-bottom:none}.swatch{border:1px solid rgb(255 255 255 / 20%);border-radius:6px;height:32px;width:32px;box-shadow:inset 0 1px 2px #0000001a;transition:transform var(--transition)}.swatch:hover{transform:scale(1.15)}.color-row strong{font-family:var(--font-mono);font-size:12px;font-weight:600}.color-row em{color:var(--color-text-light-muted);font-size:12px;font-style:normal}.color-row .color-bar{height:3px;background:currentColor;border-radius:2px;min-width:20px;max-width:80px}.empty-list,.hint{color:var(--color-text-light-muted);font-size:12px;padding:8px 0}.saved-row{align-items:center;display:grid;gap:8px;grid-template-columns:1fr auto;padding:10px 0;border-bottom:1px solid rgb(255 255 255 / 4%)}.saved-row:last-child{border-bottom:none}.saved-row button{background:transparent;color:var(--color-text-light);padding:0;text-align:left}.saved-row button:hover{color:#fff}.saved-row button strong{font-size:13px;font-weight:600}.saved-row button span{color:var(--color-text-light-muted);display:block;font-size:11px;margin-top:3px}.saved-row .delete{color:#ff826eb3;font-size:11px;font-weight:600}.saved-row .delete:hover{color:#ff826e}.topbar-nav{display:flex;gap:4px}.nav-link{border-radius:var(--radius-pill);color:var(--color-text-muted);font-size:13px;font-weight:600;padding:6px 14px;text-decoration:none;transition:all var(--transition)}.nav-link:hover,.nav-link.active,.nav-link.router-link-active{background:#0000000f;color:var(--color-text)}.topbar-actions{display:flex;align-items:center;gap:10px}.login-action{background:#0000000f;border-radius:var(--radius-pill);color:var(--color-text);font-size:13px;font-weight:600;padding:6px 18px;transition:all var(--transition)}.login-action:hover{background:#0000001a}.save-action{background:var(--color-primary);border-radius:var(--radius-pill);color:#fff;font-size:13px;font-weight:600;padding:6px 18px;transition:all var(--transition)}.save-action:hover:not(:disabled){background:var(--color-primary-hover)}.save-action:disabled{opacity:.4;cursor:not-allowed}.user-badge{cursor:pointer;transition:transform var(--transition)}.user-badge:hover{transform:scale(1.08)}.user-avatar{border:2px solid rgb(255 255 255 / 20%);border-radius:50%;height:32px;object-fit:cover;width:32px}.user-avatar-fallback{align-items:center;background:var(--color-primary);border:2px solid rgb(255 255 255 / 20%);border-radius:50%;color:#fff;display:flex;font-size:13px;font-weight:700;height:32px;justify-content:center;width:32px}.gallery{height:100vh;overflow:hidden}.gallery .gallery-content{overflow-y:auto}.gallery-content{max-width:1100px;margin:0 auto;padding:0 16px;width:100%}.gallery-hero{padding:64px 12px 40px;text-align:center}.gallery-hero h1{color:var(--color-text);font-size:36px;font-weight:800;letter-spacing:-1px;margin:0 0 10px}.gallery-hero p{color:var(--color-text-muted);font-size:16px;margin:0 0 28px}.hero-cta{background:var(--color-primary);border-radius:var(--radius-pill);color:#fff;display:inline-block;font-size:14px;font-weight:700;padding:10px 28px;text-decoration:none;transition:all var(--transition)}.hero-cta:hover{background:var(--color-primary-hover);box-shadow:0 4px 20px #c4644a4d;transform:translateY(-1px)}.gallery-grid{display:grid;gap:20px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));padding:0 0 60px}.showcase-card{background:var(--color-surface-card);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--color-border);border-radius:var(--radius-md);box-shadow:var(--shadow-card);cursor:pointer;overflow:hidden;transition:all var(--transition)}.showcase-card:hover{border-color:#0000001a;box-shadow:var(--shadow-elevated);transform:translateY(-3px)}.showcase-preview{background:var(--color-surface-light);border-bottom:1px solid var(--color-border);display:flex;gap:1px;overflow:hidden}.showcase-preview.generated{aspect-ratio:1;background:linear-gradient(135deg,#ffffff7f,#f5e7d557),var(--color-surface-light);display:block;padding:10px}.showcase-preview.generated img{border-radius:14px;display:block;height:100%;object-fit:cover;width:100%}.showcase-half{display:flex;flex:1;flex-direction:column;align-items:center;gap:6px;padding:14px 10px 10px}.showcase-half small{color:var(--color-text-muted);font-size:11px;font-weight:600;letter-spacing:.5px;text-transform:uppercase}.showcase-pixels{display:grid;gap:0;width:100%}.showcase-pixels span{aspect-ratio:1}.showcase-pixels span.empty{background:transparent!important}.showcase-beads{display:grid;gap:2px;width:100%}.showcase-beads span{aspect-ratio:1;border-radius:50%;min-width:0}.showcase-beads span.empty{background:transparent!important}.showcase-info{display:grid;gap:4px;padding:14px 16px}.showcase-info strong{color:var(--color-text);font-size:15px;font-weight:700}.showcase-info span{color:var(--color-text-muted);font-size:12px;font-family:var(--font-mono)}.showcase-info em{color:var(--color-text-muted);font-size:12px;font-style:normal;line-height:1.4}.gallery-footer{border-top:1px solid var(--color-border);padding:48px 12px;text-align:center}.gallery-footer p{color:var(--color-text-muted);font-size:15px;margin:0 0 20px}.login-overlay{align-items:center;background:radial-gradient(circle at 50% 40%,rgb(255 238 212 / 18%),transparent 30%),#231c179e;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);display:flex;height:100vh;justify-content:center;left:0;position:fixed;top:0;width:100vw;z-index:9999}.login-modal{align-items:center;background:linear-gradient(180deg,rgb(255 255 255 / 8%),transparent 35%),var(--color-surface-dark-alt);border:1px solid rgb(255 255 255 / 12%);border-radius:24px;box-shadow:0 26px 90px #00000052;display:flex;flex-direction:column;gap:16px;padding:38px 42px;position:relative;max-width:360px;width:90vw}.modal-close{background:transparent;border:none;color:var(--color-text-light-muted);cursor:pointer;font-size:24px;line-height:1;padding:4px 8px;position:absolute;right:12px;top:12px;transition:color var(--transition)}.modal-close:hover{color:var(--color-text-light)}.login-modal .brand-mark{font-size:28px;height:48px;width:48px;line-height:48px}.modal-title{color:var(--color-text-light);font-size:16px;font-weight:700}.qr-wrap{background:#fffaf4;border:1px solid rgb(255 255 255 / 70%);border-radius:18px;box-shadow:0 14px 38px #0003;padding:14px}.qr-image{display:block;border-radius:12px;height:210px;object-fit:cover;width:210px}.login-code-card{align-items:center;background:#fffaf417;border:1px solid rgb(255 255 255 / 12%);border-radius:18px;display:grid;gap:6px;justify-items:center;padding:14px 22px;width:210px}.login-code-card small{color:var(--color-text-light-muted);font-size:11px;font-weight:700}.login-code-card strong{color:#fff7ed;font-family:var(--font-mono);font-size:30px;font-weight:900;letter-spacing:4px}.qr-hint{color:var(--color-text-light-muted);font-size:13px;line-height:1.6;margin:0;text-align:center}.qr-status{background:#fff6eb17;border:1px solid rgb(255 255 255 / 8%);border-radius:999px;color:#ffd9bc;font-size:13px;font-weight:600;margin:0;padding:8px 14px;text-align:center}@media(max-width:1080px){body{overflow:auto}.app-shell{height:auto;min-height:100vh}.topbar{grid-template-columns:1fr auto}.project-meta{display:none}.workspace{grid-template-columns:1fr}.canvas-shell,.side-panel{height:auto;min-height:auto}.pattern-board{max-width:88vw;width:min(88vw,620px)}}@media(max-width:640px){.app-shell{padding:8px;gap:8px}.canvas-stage{padding:16px}.empty-pattern{min-height:280px;min-width:260px}.panel-card{padding:16px}}