:root{--bg: #07080d;--surface: rgba(18, 20, 30, .72);--surface-2: rgba(24, 27, 40, .88);--surface-3: rgba(32, 36, 54, .65);--line: rgba(255, 255, 255, .07);--line-strong: rgba(255, 255, 255, .12);--text: #f4f2ff;--muted: #8b91a8;--muted-2: #5f657a;--accent: #7c5cff;--accent-2: #ff5c8a;--accent-3: #3ee8b0;--radius: 20px;--radius-sm: 14px;--shadow: 0 32px 80px rgba(0, 0, 0, .55);--glow: 0 0 80px rgba(124, 92, 255, .18);--font-display: "Outfit", sans-serif;--font-ui: "DM Sans", sans-serif;--font-body: "IBM Plex Sans Thai", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100%}body{font-family:var(--font-body);color:var(--text);background:var(--bg);overflow-x:hidden}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}.ambient{position:fixed;top:0;right:0;bottom:0;left:0;pointer-events:none;z-index:0;overflow:hidden}.orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.55;animation:float 18s ease-in-out infinite}.orb-1{width:520px;height:520px;background:radial-gradient(circle,rgba(124,92,255,.45),transparent 70%);top:-180px;left:-120px}.orb-2{width:480px;height:480px;background:radial-gradient(circle,rgba(255,92,138,.28),transparent 70%);top:10%;right:-100px;animation-delay:-6s}.orb-3{width:400px;height:400px;background:radial-gradient(circle,rgba(62,232,176,.18),transparent 70%);bottom:-120px;left:35%;animation-delay:-12s}.grid-bg{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,black,transparent);mask-image:radial-gradient(ellipse 80% 70% at 50% 30%,black,transparent)}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(24px,-18px) scale(1.04)}66%{transform:translate(-16px,12px) scale(.98)}}.app{position:relative;z-index:1;display:grid;grid-template-columns:280px minmax(0,1fr) 360px;grid-template-rows:76px minmax(0,1fr);min-height:100vh}.app-library{grid-template-columns:1fr}.topbar{grid-column:1 / -1;display:flex;align-items:center;justify-content:space-between;padding:0 24px;border-bottom:1px solid var(--line);background:#07080da6;-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px)}.brand{display:flex;align-items:center;gap:14px}.brand-icon{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,#7c5cff,#ff5c8a,#f5c842);display:grid;place-items:center;box-shadow:0 8px 28px #7c5cff59}.brand-icon svg{width:22px;height:22px;color:#fff}.brand h1{font-family:var(--font-display);font-size:1.2rem;font-weight:700}.brand p{color:var(--muted);font-size:.78rem;font-family:var(--font-ui);margin-top:1px}.top-actions{display:flex;align-items:center;gap:10px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:42px;padding:0 18px;border-radius:13px;font-family:var(--font-ui);font-weight:600;font-size:.88rem;transition:transform .18s ease,box-shadow .18s ease}.btn:hover{transform:translateY(-2px)}.btn svg{width:16px;height:16px}.btn-ghost{border:1px solid var(--line-strong);background:var(--surface-3)}.btn-primary{background:linear-gradient(135deg,#7c5cff,#a855f7);color:#fff;box-shadow:0 12px 32px #7c5cff66}.btn-ai{background:linear-gradient(135deg,#00c2a8,#3ee8b0);border:1px solid rgba(62,232,176,.4);color:#041410;font-weight:800;box-shadow:0 10px 28px #3ee8b040}.btn-ai:disabled{opacity:.45;transform:none;cursor:not-allowed;box-shadow:none}.btn-danger{background:#ff5c8a26;border:1px solid rgba(255,92,138,.3);color:#ffb3c1}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface-3);color:var(--muted);font-size:.8rem;font-family:var(--font-ui)}.pulse{width:7px;height:7px;border-radius:50%;background:var(--accent-3);box-shadow:0 0 12px #3ee8b0e6}.sidebar{border-right:1px solid var(--line);background:#0a0b118c;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:20px 16px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}.sidebar-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.stat-box{padding:12px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--surface-3)}.stat-box strong{display:block;font-family:var(--font-display);font-size:1.35rem;font-weight:700;background:linear-gradient(135deg,#fff,#c4b5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.stat-box span{display:block;margin-top:4px;font-size:.7rem;color:var(--muted);font-family:var(--font-ui)}.section-label{font-family:var(--font-ui);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2);padding:0 8px;font-weight:600}.site-list{display:flex;flex-direction:column;gap:5px}.site-item{display:grid;grid-template-columns:44px 1fr auto;gap:11px;align-items:center;padding:11px 12px;border-radius:16px;text-align:left;border:1px solid transparent;transition:all .2s ease}.site-item:hover{border-color:var(--line-strong);background:#ffffff08}.site-item.active{border-color:#7c5cff73;background:linear-gradient(135deg,#7c5cff24,#ff5c8a0f)}.site-avatar{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.82rem;color:#0a0b11}.site-meta strong{display:block;font-size:.9rem;font-weight:600}.site-meta span{display:block;color:var(--muted);font-size:.72rem;font-family:var(--font-ui)}.site-dot{width:8px;height:8px;border-radius:50%;background:var(--muted-2)}.site-item.active .site-dot{background:var(--accent-3);box-shadow:0 0 10px #3ee8b0b3}.custom-tag{font-size:.6rem;padding:2px 6px;border-radius:4px;background:#7c5cff33;color:#c4b5fd;margin-left:4px}.sidebar-tip{margin-top:auto;padding:14px;border-radius:var(--radius-sm);border:1px solid var(--line);background:linear-gradient(160deg,#7c5cff14,#ff5c8a0a);font-size:.76rem;color:var(--muted);line-height:1.55}.sidebar-tip strong{display:block;color:#c4b5fd;font-size:.8rem;margin-bottom:4px;font-family:var(--font-ui)}.workspace{padding:22px 26px 30px;display:flex;flex-direction:column;gap:18px;min-width:0;overflow:hidden}.workspace-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;flex-wrap:wrap}.site-badge{display:inline-flex;padding:5px 10px;border-radius:999px;background:#7c5cff26;border:1px solid rgba(124,92,255,.25);color:#c4b5fd;font-size:.72rem;font-weight:600;font-family:var(--font-ui);margin-bottom:8px}.workspace-head h2{font-family:var(--font-display);font-size:1.75rem;font-weight:700;letter-spacing:-.03em}.workspace-head p{color:var(--muted);margin-top:6px;font-size:.9rem;max-width:480px}.size-pills{display:flex;gap:6px;padding:5px;border-radius:14px;border:1px solid var(--line);background:var(--surface-3)}.pill{padding:8px 14px;border-radius:10px;color:var(--muted);font-size:.78rem;font-family:var(--font-ui);transition:all .18s ease}.pill.active{color:#fff;background:linear-gradient(135deg,#7c5cff80,#a855f766);font-weight:600}.preview-shell{flex:1;min-height:0;border-radius:var(--radius);border:1px solid var(--line-strong);background:var(--surface);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);box-shadow:var(--shadow),var(--glow);display:flex;flex-direction:column;overflow:hidden}.preview-toolbar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-bottom:1px solid var(--line)}.preview-toolbar-left{display:flex;align-items:center;gap:10px}.preview-toolbar strong{font-family:var(--font-ui);font-size:.88rem}.live-tag{padding:3px 9px;border-radius:6px;background:#3ee8b01f;color:var(--accent-3);font-size:.68rem;font-weight:700;font-family:var(--font-ui)}.preview-toolbar span{color:var(--muted);font-size:.8rem;font-family:var(--font-ui)}.preview-stage{flex:1;display:grid;place-items:center;overflow:auto;padding:32px 20px;background:radial-gradient(circle at 50% 50%,rgba(124,92,255,.06),transparent 60%),radial-gradient(circle at 1px 1px,rgba(255,255,255,.04) 1px,transparent 0) 0 0 / 20px 20px,#05060a}.preview-frame{position:relative;width:min(100%,880px)}.preview-canvas-wrap{position:relative;width:100%;border-radius:10px;overflow:hidden;box-shadow:0 0 0 1px #ffffff14,0 30px 70px #000000a6}.preview-canvas-wrap canvas,.preview-canvas-wrap .ai-preview{display:block;width:100%;height:auto}.logo-manip{position:absolute;box-sizing:border-box;border:1.5px dashed rgba(62,232,176,.95);background:#3ee8b014;cursor:move;touch-action:none;z-index:5}.logo-manip.is-dragging{border-color:#3ee8b0;background:#3ee8b024}.logo-manip-handle{position:absolute;right:0;bottom:0;width:14px;height:14px;border-radius:3px;background:#3ee8b0;border:2px solid #041410;cursor:nwse-resize;touch-action:none;padding:0;transform:translate(40%,40%)}.logo-manip-label{position:absolute;top:4px;left:6px;font-size:10px;font-family:var(--font-ui);color:#9af0d4;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #000;background:#00000073;padding:2px 6px;border-radius:4px}.logo-editor{display:flex;flex-direction:column;gap:8px}.logo-thumb{width:100%;max-height:80px;object-fit:contain;border-radius:10px;background:#00000059;border:1px solid var(--line)}.logo-upload-actions{display:flex;flex-direction:column}.preview-dims{margin-top:14px;text-align:center;font-family:var(--font-ui);font-size:.72rem;color:var(--muted-2)}.gen-overlay{position:absolute;top:0;right:0;bottom:0;left:0;display:grid;place-content:center;gap:12px;background:#06080eb8;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;font-family:var(--font-ui);text-align:center}.gen-spinner{width:36px;height:36px;margin:0 auto;border:3px solid rgba(255,255,255,.2);border-top-color:#3ee8b0;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.gen-error{margin-top:10px;text-align:center;color:#ff8fa3;font-family:var(--font-ui);font-size:.82rem}.ai-hint{margin-top:12px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:#3ee8b014;font-family:var(--font-ui);font-size:.78rem;color:var(--muted);line-height:1.45}.ai-hint strong{display:block;color:#9af0d4;margin-bottom:2px}.inspector{border-left:1px solid var(--line);background:#0a0b118c;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);padding:20px 18px 28px;overflow-y:auto;display:flex;flex-direction:column;gap:14px}.card{border:1px solid var(--line);background:var(--surface-2);border-radius:var(--radius-sm);padding:16px}.card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}.card-head h3{font-family:var(--font-ui);font-size:.85rem;font-weight:600}.card-head em{font-style:normal;color:var(--muted-2);font-size:.7rem;font-family:var(--font-ui)}.template-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.template-card{border-radius:12px;border:1px solid var(--line);padding:12px;text-align:left;background:#00000040;min-height:80px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;transition:all .2s ease;position:relative;overflow:hidden}.template-card:hover{transform:translateY(-2px)}.template-card.active{border-color:#7c5cff8c;box-shadow:0 0 0 1px #7c5cff33 inset}.template-card strong{font-size:.8rem;font-family:var(--font-ui);position:relative}.template-card span{color:var(--muted);font-size:.68rem;font-family:var(--font-ui);position:relative}.template-swatch{position:absolute;top:0;left:0;right:0;height:36px;border-radius:12px 12px 0 0}.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.slot{aspect-ratio:3/4;border-radius:12px;border:1.5px dashed rgba(255,255,255,.15);background:#ffffff05;position:relative;overflow:hidden;transition:all .2s ease}.slot:hover{border-color:#7c5cff66}.slot.filled{border-style:solid;border-color:#3ee8b066}.slot.slot-active{border-color:#7c5cffd9;box-shadow:0 0 0 2px #7c5cff4d}.slot-empty,.slot-select{position:absolute;top:0;right:0;bottom:0;left:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--muted);font-size:.68rem;font-weight:600;cursor:pointer;border:0;background:transparent;padding:0;width:100%;height:100%}.slot-empty input,.slot-replace input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.slot-select img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.slot-label{position:absolute;left:6px;bottom:6px;z-index:1;padding:2px 7px;border-radius:6px;background:#0000008c;color:#fff;font-size:.62rem;font-family:var(--font-ui);font-weight:600}.slot-replace{position:absolute;top:6px;right:6px;z-index:2;padding:3px 7px;border-radius:6px;background:#0009;border:1px solid rgba(255,255,255,.18);color:#fff;font-size:.6rem;font-family:var(--font-ui);font-weight:600;cursor:pointer;overflow:hidden}.slot-replace:hover{background:#7c5cff8c}.slot-picker{margin-bottom:10px}.slot-picker .pill:disabled{opacity:.35;cursor:not-allowed}.photo-adjust{margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}.field{display:flex;flex-direction:column;gap:7px;margin-bottom:12px}.field:last-child{margin-bottom:0}.field label{font-size:.74rem;color:var(--muted);font-weight:500;font-family:var(--font-ui)}.field input,.field textarea,.field select{width:100%;border-radius:12px;border:1px solid var(--line);background:#00000059;padding:11px 14px;outline:none;font-size:.88rem}.field input:focus,.field textarea:focus,.field select:focus{border-color:#7c5cff8c;box-shadow:0 0 0 3px #7c5cff1f}.field textarea{min-height:76px;resize:vertical}.char-count{text-align:right;font-size:.68rem;color:var(--muted-2);font-family:var(--font-ui)}.field-size-row{display:flex;align-items:center;gap:10px;margin-top:8px}.field-size-row>span{flex:0 0 auto;font-size:.7rem;color:var(--muted-2);font-family:var(--font-ui)}.style-pills.compact{flex:1}.style-pills.compact .pill{padding:5px 6px;font-size:.72rem}.text-style-panel{margin-top:8px;padding-top:12px;border-top:1px solid var(--line)}.style-pills{display:flex;flex-wrap:nowrap;gap:6px}.style-pills.wrap{flex-wrap:wrap}.style-pills .pill{flex:1;padding:7px 8px;border:1px solid var(--line-strong);background:var(--surface-3);text-align:center;min-width:0}.style-pills .pill.active{color:#fff;border-color:#7c5cff8c;background:linear-gradient(135deg,#7c5cff8c,#a855f759)}.style-pills .pill.color-swatch{flex:0 0 28px;width:28px;height:28px;padding:0;border-radius:8px}.stroke-color-row{display:flex;align-items:center;gap:10px}.stroke-color-row input[type=color]{width:42px;height:34px;padding:2px;border-radius:8px;border:1px solid var(--line-strong);background:var(--surface-3);cursor:pointer}.style-note{margin:4px 0 0;font-size:.68rem;color:var(--muted-2);font-family:var(--font-ui);line-height:1.4}.font-upload-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:8px}.font-upload-row .style-note{margin:0}.font-pill{display:inline-flex;align-items:center;gap:2px;padding:0!important;overflow:hidden}.font-pill-select{border:0;background:transparent;color:inherit;font:inherit;padding:8px 8px 8px 12px;cursor:pointer;max-width:140px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.font-pill-remove{border:0;background:transparent;color:var(--muted);font-size:1rem;line-height:1;padding:6px 10px 6px 4px;cursor:pointer}.font-pill-remove:hover{color:#ff8aa8}.font-pill.active .font-pill-select,.font-pill.active .font-pill-remove{color:#fff}.font-error{margin-top:6px;font-size:.72rem;color:#ff8aa8;font-family:var(--font-ui)}.export-row{display:flex;gap:8px}.library{grid-column:1 / -1;padding:28px 32px 40px;overflow-y:auto;min-height:0}.library-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:22px}.library-head h2{font-family:var(--font-display);font-size:1.9rem;font-weight:700;letter-spacing:-.03em}.library-head p{color:var(--muted);margin-top:6px;font-size:.92rem}.library-tools{display:flex;flex-direction:column;gap:10px;align-items:flex-end}.library-search{width:min(100%,320px);border-radius:12px;border:1px solid var(--line-strong);background:#00000059;padding:11px 14px;outline:none;font-size:.88rem}.library-search:focus{border-color:#7c5cff8c;box-shadow:0 0 0 3px #7c5cff1f}.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}.library-card{text-align:left;border-radius:18px;border:1px solid var(--line);background:var(--surface-2);overflow:hidden;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.library-card:hover{transform:translateY(-3px);border-color:#7c5cff73;box-shadow:0 18px 40px #00000059}.library-swatch{height:72px;width:100%}.library-card-body{padding:14px 16px 16px;display:flex;flex-direction:column;gap:10px}.library-card-top{display:flex;gap:12px;align-items:center}.library-avatar{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.78rem;color:#0a0b11;flex-shrink:0}.library-card-top strong{display:block;font-size:.95rem}.library-card-top em{display:block;font-style:normal;color:var(--muted);font-size:.76rem;font-family:var(--font-ui)}.library-card-body>p{color:var(--muted);font-size:.78rem;line-height:1.45;min-height:2.2em}.library-tags{display:flex;flex-wrap:wrap;gap:6px}.library-tags span{padding:4px 8px;border-radius:999px;border:1px solid var(--line);background:#ffffff08;color:var(--muted-2);font-size:.68rem;font-family:var(--font-ui)}.library-empty{text-align:center;color:var(--muted);padding:48px 20px}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;background:#000000a6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px}.modal{width:min(100%,560px);max-height:90vh;overflow-y:auto;background:var(--surface-2);border:1px solid var(--line-strong);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow)}.modal h2{font-family:var(--font-display);font-size:1.3rem;margin-bottom:6px}.modal>p{color:var(--muted);font-size:.85rem;margin-bottom:20px}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hint-box{padding:12px;border-radius:12px;background:#7c5cff14;border:1px solid rgba(124,92,255,.2);font-size:.76rem;color:#c4b5fd;line-height:1.5;margin-top:14px}@media(max-width:1200px){.app{grid-template-columns:1fr;grid-template-rows:auto}.sidebar,.inspector{border:0;border-bottom:1px solid var(--line)}.form-row{grid-template-columns:1fr}}