:root{color:#101828;font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:radial-gradient(circle at 0 0,#4f46e52e,#0000 30%),radial-gradient(circle at 100% 0,#0ea5e92e,#0000 24%),linear-gradient(#f8fbff 0%,#eef2ff 100%);font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-weight:400;line-height:1.5}*{box-sizing:border-box}html{scroll-behavior:smooth}body{color:#101828;background:radial-gradient(circle at 0 0,#4f46e533,#0000 28%),radial-gradient(circle at 100% 0,#0ea5e929,#0000 24%),linear-gradient(#f8fbff 0%,#eef2ff 48%,#edf3ff 100%);min-width:320px;min-height:100vh;margin:0}button,input,select{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible,label:focus-within{outline-offset:2px;outline:3px solid #4f46e52e}canvas{max-width:100%}#root{min-height:100vh}h1{color:#101828;font-size:clamp(2rem,4vw,3.6rem);line-height:1.05}h2{color:#101828;font-size:1.2rem}p{margin:0}.app-shell{flex-direction:column;gap:28px;width:min(1480px,100%);margin:0 auto;padding:24px;display:flex}.panel,.board-panel,.modal-panel{-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);background:#fffffff5;border:1px solid #ffffffb3;border-radius:28px;box-shadow:0 24px 70px #0f172a14,0 8px 24px #4f46e50f}.workspace{grid-template-columns:minmax(320px,380px) minmax(0,1fr);align-items:start;gap:28px;display:grid}.sidebar{flex-direction:column;gap:18px;display:flex;position:sticky;top:24px}.panel,.board-panel{padding:24px}.panel h2,.board-panel h2,.modal-panel h2{color:#101828;margin:0}.panel-head{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;display:flex}.eyebrow{color:#4f46e5;letter-spacing:.08em;text-transform:uppercase;margin:0 0 8px;font-size:.83rem;font-weight:700}.panel-tag{color:#4338ca;background:#4f46e514;border-radius:999px;justify-content:center;align-items:center;min-width:74px;padding:8px 12px;font-size:.9rem;font-weight:700;display:inline-flex}.upload-box{cursor:pointer;background:linear-gradient(#4f46e512,#4f46e505),#f8faff;border:1px dashed #4f46e552;border-radius:22px;flex-direction:column;gap:12px;padding:20px;transition:transform .2s,border-color .2s,box-shadow .2s;display:flex}.upload-box:hover{border-color:#4f46e573;transform:translateY(-1px);box-shadow:0 16px 30px #4f46e514}.upload-box input{display:none}.upload-box span{color:#fff;background:linear-gradient(135deg,#5b52f6,#3b82f6);border-radius:14px;justify-content:center;align-items:center;width:fit-content;min-width:108px;padding:11px 16px;font-weight:700;display:inline-flex;box-shadow:0 10px 24px #4f46e538}.upload-box small,.hint,.board-header p,.swatch-item span,.zoom-meta,.modal-header p,.summary-card span,.note-card span{color:#667085}.field-row,.button-row,.result-notes,.result-summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:18px;display:grid}.action-row{margin-top:18px}.action-row-single{grid-template-columns:minmax(0,1fr)}.result-summary{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:0}.palette-picker{margin-top:18px}.palette-picker label,.field-row label{color:#344054;flex-direction:column;gap:9px;font-size:.92rem;font-weight:600;display:flex}.palette-picker select,.field-row input{color:#101828;min-height:48px;font:inherit;background:#fcfdff;border:1px solid #94a3b857;border-radius:14px;padding:12px 14px;transition:border-color .2s,box-shadow .2s,background-color .2s;box-shadow:inset 0 1px 2px #0f172a08}.palette-picker select:hover,.field-row input:hover{border-color:#6366f157}.palette-picker select:focus,.field-row input:focus{background:#fff;border-color:#4f46e58c;outline:none;box-shadow:0 0 0 4px #4f46e51a,inset 0 1px 2px #0f172a08}.toggle-row,.slider-group{margin-top:18px}.check-card{color:#344054;background:linear-gradient(#fff,#f8fbff);border:1px solid #94a3b83d;border-radius:16px;align-items:center;gap:12px;padding:14px 16px;font-size:.94rem;font-weight:600;transition:border-color .2s,box-shadow .2s,transform .2s;display:flex}.check-card:hover{border-color:#6366f14d;transform:translateY(-1px);box-shadow:0 10px 24px #0f172a0d}.check-card input{accent-color:#4f46e5;width:18px;height:18px;margin:0}.slider-group{background:linear-gradient(#f8fafceb,#fffffffa);border:1px solid #94a3b82e;border-radius:18px;gap:14px;padding:14px 16px;display:grid}.slider-group label{color:#344054;grid-template-columns:72px minmax(0,1fr) 36px;align-items:center;gap:12px;font-size:.94rem;font-weight:600;display:grid}.slider-group input[type=range]{accent-color:#4f46e5;width:100%}.slider-group em{color:#667085;text-align:right;font-style:normal}.button-row button,.icon-button{color:#0f172a;min-height:48px;font:inherit;cursor:pointer;background:#fff;border:1px solid #94a3b83d;border-radius:14px;padding:12px 16px;font-weight:700;transition:transform .2s,box-shadow .2s,border-color .2s,background-color .2s}.button-row button:hover:not(:disabled),.board-actions>button:hover:not(:disabled),.icon-button:hover{background:#fff;border-color:#4f46e547;transform:translateY(-1px);box-shadow:0 14px 30px #0f172a14}.button-row button:disabled{opacity:.55;cursor:not-allowed}.button-row .primary{color:#fff;background:linear-gradient(135deg,#4f46e5,#2563eb);border-color:#0000;box-shadow:0 14px 32px #4f46e53d}.hint,.status,.zoom-meta{margin:14px 0 0;font-size:.9rem;line-height:1.5}.status{color:#2563eb;background:#2563eb14;border-radius:14px;padding:12px 14px;font-weight:700}.status.error{color:#dc2626;background:#dc262614}.note-card,.summary-card{background:linear-gradient(135deg,#4f46e514,#0ea5e90f),#fff;border:1px solid #4f46e51f;border-radius:18px;flex-direction:column;gap:8px;min-height:88px;padding:16px;display:flex}.note-card strong,.summary-card strong{color:#101828;font-size:1rem;line-height:1.4}.board-panel{min-width:0}.board-header{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:18px;display:flex}.board-header.compact{margin-bottom:20px}.board-header h2{font-size:1.35rem}.board-header p{max-width:560px;margin-top:6px;line-height:1.6}.board-actions{flex-wrap:wrap;justify-content:flex-end;align-items:flex-start;gap:12px;display:flex}.board-actions>button{color:#0f172a;min-height:44px;font:inherit;cursor:pointer;background:#fff;border:1px solid #94a3b83d;border-radius:14px;padding:11px 14px;font-weight:700;transition:transform .2s,box-shadow .2s,border-color .2s}.board-actions>button:disabled{opacity:.55;cursor:not-allowed}.board-badges,.modal-badges{flex-wrap:wrap;gap:10px;display:flex}.board-badges span,.modal-badges span{color:#4338ca;background:linear-gradient(#4f46e514,#4f46e50a);border:1px solid #4f46e514;border-radius:999px;padding:8px 12px;font-size:.86rem;font-weight:700}.board-stage,.modal-stage{background:linear-gradient(90deg,#94a3b81a 1px,#0000 1px) 0 0/36px 36px,linear-gradient(#94a3b81a 1px,#0000 1px) 0 0/36px 36px,linear-gradient(#fbfcff 0%,#eef2ff 100%);border:1px solid #94a3b824;border-radius:24px;min-height:360px;padding:20px}.canvas-scroll{background:#ffffffa8;border-radius:18px;width:100%;height:100%;padding:4px;overflow:auto;box-shadow:inset 0 0 0 1px #94a3b81f}.pattern-canvas{max-width:none;image-rendering:pixelated;image-rendering:crisp-edges;cursor:zoom-in;background:#fff;margin:0 auto;display:block}.empty-state{text-align:center;color:#475467;background:#ffffff8c;border:1px dashed #94a3b852;border-radius:20px;place-items:center;min-height:360px;padding:28px;display:grid}.empty-state strong{color:#101828;margin-bottom:8px;font-size:1.2rem;display:block}.modal-overlay{z-index:50;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f172a94;justify-content:center;align-items:center;padding:20px;display:flex;position:fixed;inset:0}.modal-panel{width:min(1200px,100%);max-height:calc(100vh - 40px);padding:22px;overflow:auto}.colors-modal{width:min(760px,100%)}.preview-zoom-modal{width:min(1320px,100%)}.save-preview-modal{width:min(860px,100%)}.modal-header{justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:16px;display:flex}.icon-button{flex-shrink:0}.modal-header p{margin:8px 0 0}.modal-badges{margin-bottom:18px}.preview-zoom-scroll{max-height:calc(100vh - 220px)}.save-preview-hint{color:#4338ca;background:#4f46e514;border-radius:14px;margin-bottom:16px;padding:12px 14px;font-size:.92rem;font-weight:600;line-height:1.6}.save-preview-frame{background:#f8fafce6;border-radius:18px;justify-content:center;max-height:calc(100vh - 230px);padding:8px;display:flex;overflow:auto;box-shadow:inset 0 0 0 1px #94a3b824}.save-preview-image{-webkit-user-select:none;user-select:none;background:#fff;border-radius:16px;max-width:100%;height:auto;display:block}.expanded-pattern-canvas{cursor:default}.preview-layout{grid-template-columns:minmax(0,1fr);align-items:start;gap:16px;display:grid}.inline-preview-layout{min-height:0}.detail-slider-card{background:linear-gradient(#fffffff5,#f8fafcf5);border:1px solid #94a3b82e;border-radius:18px;gap:12px;margin-top:16px;padding:16px 18px;display:grid}.detail-slider-head{justify-content:space-between;align-items:center;gap:12px;display:flex}.detail-slider-head strong{color:#101828;font-size:1rem}.detail-slider-head span,.detail-slider-scale span{color:#667085;font-size:.88rem;font-weight:600}.detail-slider-card input[type=range]{accent-color:#4f46e5;width:100%}.detail-slider-scale{justify-content:space-between;align-items:center;gap:12px;display:flex}.modal-swatch-list{grid-template-columns:repeat(2,minmax(0,1fr))}.app-footer{text-align:center;color:#667085;letter-spacing:.12em;text-transform:uppercase;padding:4px 12px 0;font-size:.78rem;font-weight:700}.swatch-list{gap:10px;display:grid}.swatch-item{background:linear-gradient(#fff,#f8fafc);border:1px solid #94a3b829;border-radius:16px;align-items:center;gap:12px;padding:14px;display:flex}.swatch-item strong{color:#101828;margin-bottom:2px;display:block}.swatch-chip{border:1px solid #0f172a29;border-radius:999px;flex-shrink:0;width:28px;height:28px}@media (width<=1180px){.workspace,.preview-layout{grid-template-columns:1fr}.sidebar{position:static}}@media (width<=720px){.app-shell{gap:18px;padding:12px}.workspace{flex-direction:column;display:flex}.board-panel{order:-1}.panel,.board-panel,.modal-panel{border-radius:22px}.panel,.board-panel{padding:18px}.field-row,.button-row,.result-notes,.result-summary,.modal-swatch-list{grid-template-columns:1fr}.panel-head,.board-header,.modal-header{flex-direction:column}.board-header{gap:14px}.board-actions{justify-content:flex-start;align-items:stretch;gap:10px;width:100%}.board-actions>button,.board-badges{width:100%}.panel-tag{align-self:flex-start}.board-stage,.modal-stage{min-height:280px;padding:12px}.inline-preview-layout{gap:12px}.inline-preview-layout .canvas-scroll{padding:0;overflow:hidden}.inline-preview-layout .pattern-canvas{width:100%;max-width:100%;height:auto}.detail-slider-card{margin-top:12px;padding:14px}.detail-slider-head{flex-direction:column;align-items:flex-start}.empty-state{min-height:280px;padding:20px 16px}.modal-overlay{padding:0}.modal-panel{border-radius:0;width:100%;min-height:100vh;max-height:100vh;padding:16px}.preview-zoom-scroll{max-height:calc(100vh - 190px)}.save-preview-hint{font-size:.88rem}.save-preview-frame{max-height:calc(100vh - 210px);padding:4px}.app-footer{letter-spacing:.1em;padding-top:2px;font-size:.72rem}}