body.cp-app-page{margin:0;background:#f6f1ff;overflow:hidden;height:100vh}body.cp-app-page .cp-header,body.cp-app-page .cp-footer{display:none}.cp-app{display:flex;flex-direction:column;height:100vh;height:100dvh;font-family:'Poppins',system-ui,sans-serif}.cp-app.cp-dark{background:#1e1e2a;color:#eee}.cp-app.cp-dark .cp-app-top,.cp-app.cp-dark .cp-app-bottom{background:#2b2b3a}.cp-app.cp-dark .cp-app-tools,.cp-app.cp-dark .cp-app-palettes{background:#2b2b3a}.cp-app-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap;row-gap:8px;background:#fff;padding:10px 16px;border-bottom:2px solid #f0eafc;z-index:20}.cp-app-back{font-size:22px;color:#2b2b3a;text-decoration:none;flex-shrink:0}.cp-app-title{font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.cp-app-top-actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.cp-icon-btn{width:40px;height:40px;border-radius:12px;border:2px solid #f0eafc;background:#fff;font-size:18px;cursor:pointer;color:#2b2b3a}.cp-icon-btn:hover{border-color:#7c5cff}.cp-app-body{flex:1;display:flex;min-height:0;position:relative}.cp-app-tools{display:flex;flex-direction:column;gap:8px;background:#fff;padding:12px 8px;border-right:2px solid #f0eafc;z-index:15;overflow-y:auto;flex-shrink:0}.cp-tool{width:48px;height:48px;border-radius:14px;border:2px solid transparent;background:#f6f1ff;font-size:22px;cursor:pointer}.cp-tool:hover{border-color:#c9b8ff}.cp-tool.active{border-color:#7c5cff;background:#ece5ff;box-shadow:0 0 0 2px #7c5cff33}.cp-app-canvas-wrap{flex:1;min-width:0;min-height:0;position:relative;overflow:hidden;touch-action:none;display:flex;align-items:center;justify-content:center;background:linear-gradient(45deg,#faf8ff 25%,transparent 25%,transparent 75%,#faf8ff 75%),linear-gradient(45deg,#faf8ff 25%,transparent 25%,transparent 75%,#faf8ff 75%);background-size:24px 24px;background-position:0 0,12px 12px;background-color:#fff}.cp-app-canvas-inner{position:relative;transform-origin:center center}.cp-app-svg svg{display:block;background:#fff;border-radius:8px;box-shadow:0 8px 30px rgba(124,92,255,.15)}.cp-app-svg svg [fill="none"]{}#cpDrawCanvas{position:absolute;top:0;left:0;touch-action:none;cursor:crosshair}#cpDrawCanvas.cp-nope{pointer-events:none}.cp-app-palettes{width:230px;background:#fff;border-left:2px solid #f0eafc;display:flex;flex-direction:column;z-index:15;overflow:hidden;flex-shrink:0;min-height:0}.cp-palette-groups{display:flex;flex-wrap:wrap;gap:6px;padding:10px;border-bottom:2px solid #f0eafc;max-height:38%;overflow-y:auto}.cp-pal-group{border:2px solid #f0eafc;background:#fff;border-radius:999px;padding:5px 12px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit}.cp-pal-group.active{background:#7c5cff;border-color:#7c5cff;color:#fff}.cp-palette-swatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;padding:12px;overflow-y:auto;flex:1;min-height:0;align-content:start}.cp-sw{aspect-ratio:1;border-radius:12px;border:2px solid #eee;cursor:pointer;padding:0}.cp-sw.active{border-color:#2b2b3a;box-shadow:0 0 0 2px #7c5cff}.cp-shade-row{padding:8px 14px;border-top:2px solid #f0eafc;font-size:13px;font-weight:600}.cp-shade-row input{width:100%}.cp-current-color{display:flex;align-items:center;gap:10px;padding:10px 14px 14px;font-size:13px}#cpCurrentSwatch{width:28px;height:28px;border-radius:50%;border:2px solid #ddd;display:inline-block}.cp-app-bottom{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;background:#fff;padding:10px 16px;border-top:2px solid #f0eafc;z-index:20}.cp-app-btn{border:0;border-radius:999px;padding:11px 26px;font-weight:700;cursor:pointer;background:#7c5cff;color:#fff;font-family:inherit;font-size:15px}.cp-app-btn:hover{background:#5f3df0}.cp-app-menu{position:absolute;top:60px;right:12px;z-index:60;background:#fff;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.2);padding:8px;min-width:220px;max-width:calc(100vw - 24px);display:flex;flex-direction:column}.cp-app-menu[hidden]{display:none}.cp-app-menu button{background:none;border:0;text-align:left;padding:11px 14px;border-radius:10px;font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;color:#2b2b3a}.cp-app-menu button:hover{background:#f6f1ff}.cp-share-btns{display:flex;flex-wrap:wrap;gap:10px;margin:6px 0 14px}.cp-share-btns .cp-btn{padding:10px 20px;font-size:14px}@media print{.cp-app-top,.cp-app-tools,.cp-app-palettes,.cp-app-bottom,.cp-app-menu,.cp-modal{display:none !important}.cp-app-canvas-wrap{background:#fff}#cpDrawCanvas{position:absolute}}@media (max-width:860px){.cp-app-body{flex-direction:column}.cp-app-top{gap:8px;padding:8px 12px}.cp-app-btn{padding:9px 18px;font-size:14px}.cp-app-tools{flex-direction:row;flex-wrap:wrap;justify-content:center;border-right:0;border-bottom:2px solid #f0eafc;padding:8px;overflow-y:visible;overflow-x:visible}.cp-tool{width:44px;height:44px;flex-shrink:0}.cp-app-palettes{width:100%;border-left:0;border-top:2px solid #f0eafc;max-height:32%}.cp-palette-groups{max-height:88px}.cp-palette-swatches{grid-template-columns:repeat(8,1fr)}.cp-shade-row,.cp-current-color{display:none}.cp-app-bottom{gap:8px;padding:8px 12px}}@media (max-width:520px){.cp-online-index{padding:20px 14px 36px}.cp-index-grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.cp-app-menu{top:auto;bottom:12px}}.cp-app-browse{margin-right:6px}.cp-modal-box.cp-modal-wide{max-width:760px}.cp-online-index{max-width:1080px;margin:0 auto;padding:32px 20px 48px}.cp-online-index h1{margin-bottom:4px}.cp-index-hubs{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 24px}.cp-index-hub{display:inline-block;padding:8px 16px;border-radius:999px;background:#f0eafc;text-decoration:none;color:inherit;font-weight:600}.cp-index-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:14px;margin-top:16px}.cp-index-card{display:flex;flex-direction:column;border:2px solid #f0eafc;border-radius:14px;overflow:hidden;text-decoration:none;color:inherit;background:#fff}.cp-index-card img{width:100%;height:auto;display:block;aspect-ratio:3/4;object-fit:cover}.cp-index-card span{padding:10px;font-weight:600;text-align:center;overflow-wrap:break-word}.cp-browse-controls{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 14px}.cp-browse-controls input[type="search"]{flex:2;min-width:160px;padding:10px 12px;border:2px solid #e5e0f5;border-radius:10px;font-size:14px}.cp-browse-controls select{flex:1;min-width:110px;padding:10px;border:2px solid #e5e0f5;border-radius:10px;font-size:14px;background:#fff}.cp-browse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:10px;max-height:52vh;overflow-y:auto;padding:2px}.cp-browse-card{display:flex;flex-direction:column;border:2px solid #f0eafc;border-radius:12px;overflow:hidden;text-decoration:none;color:inherit;background:#fff}.cp-browse-card:hover{border-color:#7c5cd6}.cp-browse-card img{width:100%;height:96px;object-fit:cover;background:#faf8ff}.cp-browse-noimg{display:flex;align-items:center;justify-content:center;height:96px;font-size:34px;background:#faf8ff}.cp-browse-card span:last-child{padding:8px;font-size:13px;font-weight:600;text-align:center}.cp-browse-loading{grid-column:1 / -1;text-align:center;color:#888;padding:30px 0}.cp-tabs{display:flex;gap:6px;margin-bottom:14px}.cp-tab{flex:1;padding:10px;border:2px solid #e5e0f5;background:#faf8ff;border-radius:10px;font-weight:700;font-size:14px;cursor:pointer}.cp-tab.active{background:#7c5cd6;border-color:#7c5cd6;color:#fff}.cp-tab-panel h3{margin:0 0 8px}.cp-tab-palettes{display:flex;flex-wrap:wrap;gap:6px}.cp-tab-palette{background:#f1edfb;border-radius:20px;padding:5px 12px;font-size:13px}.cp-info-body{max-height:60vh;overflow-y:auto}