.patterly-app{--cream: #FAFAF8;--cream-dark: #F0EFEC;--dark: #1A1A1A;--forest: #8B9E8B;--forest-light: #F4F6F4;--amber: #C4816C;--brown: #6B6B6B;--black: #0A0A0A;--white: #FFFFFF;--gray-100: #F5F5F3;--gray-200: #E8E8E4;--gray-500: #8A8A85;--gray-700: #4A4A46;--p-cream: var(--cream);--p-cream-dark: var(--cream-dark);--p-dark: var(--dark);--p-forest: var(--forest);--p-forest-light: var(--forest-light);--p-amber: var(--amber);--p-brown: var(--brown);--p-white: var(--white);--font-serif: "Playfair Display", Georgia, "Noto Serif SC", serif;--font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "PingFang SC", "Hiragino Sans GB", sans-serif;--ease: cubic-bezier(.25, .1, .25, 1);--transition: .3s cubic-bezier(.25, .1, .25, 1);font-family:var(--font-sans);font-size:15px;line-height:1.75;color:var(--dark);background:var(--cream);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.patterly-app *,.patterly-app *:before,.patterly-app *:after{box-sizing:border-box}.patterly-app h1,.patterly-app h2,.patterly-app h3{font-family:var(--font-serif);letter-spacing:-.02em;line-height:1.2;margin:0}.patterly-app .p-nav-link{position:relative;font-size:13px;font-weight:500;text-decoration:none;color:var(--brown);padding:4px 0;letter-spacing:.04em;transition:color var(--transition)}.patterly-app .p-nav-link:after{content:"";position:absolute;bottom:-2px;left:0;width:0;height:1px;background:var(--dark);transition:width var(--transition)}.patterly-app .p-nav-link:hover{color:var(--dark)}.patterly-app .p-nav-link:hover:after{width:100%}.patterly-app .p-nav-link.active{color:var(--dark)}.patterly-app .p-nav-link.active:after{width:100%}.patterly-app .p-nav-link.muted{color:#999}.patterly-app input[type=number],.patterly-app input[type=text],.patterly-app select{appearance:none;background:var(--white);border:1px solid rgba(0,0,0,.1);border-radius:8px;padding:10px 14px;font-size:14px;font-family:var(--font-sans);color:var(--dark);width:100%;outline:none;transition:all var(--transition)}.patterly-app input[type=number]:focus,.patterly-app input[type=text]:focus,.patterly-app select:focus{border-color:var(--amber);box-shadow:0 0 0 3px #c4816c14}.patterly-app input[type=number]::-webkit-outer-spin-button,.patterly-app input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}.patterly-app input[type=range]{accent-color:var(--forest);cursor:pointer}.patterly-app ::-webkit-scrollbar{width:4px;height:4px}.patterly-app ::-webkit-scrollbar-track{background:transparent}.patterly-app ::-webkit-scrollbar-thumb{background:#0000001a;border-radius:4px}.patterly-app .btn-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--dark);color:var(--white);border:none;border-radius:8px;padding:13px 28px;font-size:13px;font-family:var(--font-sans);font-weight:500;letter-spacing:.06em;cursor:pointer;transition:all var(--transition)}.patterly-app .btn-primary:hover{background:#000;transform:translateY(-1px);box-shadow:0 4px 12px #0000001f}.patterly-app .btn-primary:active{transform:translateY(0)}.patterly-app .btn-secondary{display:inline-flex;align-items:center;justify-content:center;background:transparent;color:var(--dark);border:1px solid rgba(0,0,0,.12);border-radius:8px;padding:12px 28px;font-size:13px;font-family:var(--font-sans);font-weight:500;letter-spacing:.06em;cursor:pointer;transition:all var(--transition)}.patterly-app .btn-secondary:hover{border-color:var(--dark);background:#00000005}.patterly-app .card{background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:4px;padding:28px;transition:all var(--transition)}.patterly-app .card:hover{border-color:#0000001f;transform:translateY(-3px);box-shadow:0 12px 40px #0000000f}.patterly-app .card-selected{border-color:var(--amber)!important;box-shadow:0 0 0 1px var(--amber),0 8px 32px #c4816c1a!important}.patterly-app .tag{display:inline-flex;align-items:center;background:var(--gray-100);color:var(--brown);border:none;border-radius:20px;padding:5px 14px;font-size:11px;font-weight:500;letter-spacing:.04em}.patterly-app .pattern-canvas{background:var(--white);border:1px solid rgba(0,0,0,.06);border-radius:8px}.patterly-app .grid-bg{background-image:linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);background-size:8px 8px}.patterly-app .panel-card{padding:24px;border:1px solid rgba(0,0,0,.06);border-radius:12px;background:var(--white)}.patterly-app .panel-card-forest{padding:24px;border:1px solid rgba(0,0,0,.06);border-radius:12px;background:var(--forest-light)}.patterly-app .section-title{font-size:11px;letter-spacing:.14em;font-weight:600;color:var(--brown);text-transform:uppercase;margin-bottom:16px}.patterly-app .section-heading{font-size:16px;font-weight:700;font-family:var(--font-serif);color:var(--dark);margin-bottom:16px}.patterly-app .label-text{font-size:12px;color:var(--dark);font-weight:500;margin-bottom:6px}.patterly-app .hint-text{font-size:11px;color:var(--brown);opacity:.5}.patterly-app .flex-row{display:flex;align-items:center}.patterly-app .flex-col{display:flex;flex-direction:column}.patterly-app .gap-xs{gap:4px}.patterly-app .gap-sm{gap:8px}.patterly-app .gap-md{gap:14px}.patterly-app .gap-lg{gap:24px}.patterly-app .modal-overlay{position:fixed;inset:0;z-index:2000;background:#00000040;backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center}.patterly-app .modal-card{background:var(--white);border-radius:16px;padding:28px 32px;width:340px;box-shadow:0 24px 64px #0000001a;border:1px solid rgba(0,0,0,.06)}.patterly-app .modal-card-lg{background:var(--white);border-radius:16px;padding:32px 36px;width:480px;max-width:90vw;box-shadow:0 24px 64px #0000001a;border:1px solid rgba(0,0,0,.06)}.patterly-app .chip{display:inline-flex;align-items:center;padding:4px 12px;border-radius:20px;font-size:11px;font-weight:500}.patterly-app .chip-forest{background:var(--forest-light);color:var(--forest)}.patterly-app .chip-amber{background:#c4816c14;color:var(--amber)}.patterly-app .tmpl-card{border:1px solid rgba(0,0,0,.06);border-radius:12px;padding:12px;cursor:pointer;transition:all var(--transition);background:var(--white);text-align:center}.patterly-app .tmpl-card:hover{border-color:#0000001f;box-shadow:0 2px 8px #0000000a;transform:translateY(-1px)}.patterly-app .tmpl-card.active{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber);background:#c4816c05}.patterly-app .tmpl-card-icon{width:52px;height:52px;margin:0 auto 8px;color:var(--dark)}.patterly-app .tmpl-card-label{font-size:12px;font-weight:600;color:var(--dark)}.patterly-app .sidebar-panel{width:320px;min-width:320px;overflow-y:auto;padding:28px 24px;border-right:1px solid rgba(0,0,0,.06);background:var(--cream)}.patterly-app .canvas-area{flex:1;display:flex;flex-direction:column;overflow:hidden;background:var(--white);position:relative}.patterly-app .collapsible-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:12px 0;user-select:none;transition:opacity var(--transition)}.patterly-app .collapsible-header:hover{opacity:.7}.patterly-app .badge-high{background:#dcfce7;color:#166534;padding:3px 10px;border-radius:10px;font-size:10px;font-weight:600}.patterly-app .badge-medium{background:#fef9c3;color:#854d0e;padding:3px 10px;border-radius:10px;font-size:10px;font-weight:600}.patterly-app .badge-low{background:#fee2e2;color:#991b1b;padding:3px 10px;border-radius:10px;font-size:10px;font-weight:600}.patterly-app .sort-tab{padding:6px 16px;border-radius:20px;font-size:12px;font-weight:500;cursor:pointer;border:1px solid transparent;background:transparent;color:var(--brown);transition:all var(--transition)}.patterly-app .sort-tab:hover{background:var(--gray-100)}.patterly-app .sort-tab.active{background:var(--dark);color:var(--white);border-color:var(--dark)}.patterly-app .fav-btn{background:none;border:none;cursor:pointer;padding:4px;transition:transform var(--transition)}.patterly-app .fav-btn:hover{transform:scale(1.15)}.patterly-app .fav-btn.active svg{fill:#e74c3c;stroke:#e74c3c}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.patterly-app .animate-fade-up{animation:fadeUp .7s var(--ease) both}.patterly-app .delay-1{animation-delay:.1s}.patterly-app .delay-2{animation-delay:.2s}.patterly-app .delay-3{animation-delay:.3s}.patterly-app .delay-4{animation-delay:.4s}.patterly-app .patterly-header{position:sticky;top:0;z-index:100;background:#fafaf8d1;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid rgba(0,0,0,.06)}.patterly-app .patterly-header-inner{max-width:1200px;margin:0 auto;padding:0 40px;height:72px;display:flex;align-items:center;justify-content:space-between}.patterly-app .community-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}