*{box-sizing:border-box}html,body,#root{height:100%;margin:0;font-family:Segoe UI,Arial,Helvetica,sans-serif;color:#222;background:#f2f3f5}button{cursor:pointer;font-family:inherit;border:1px solid #d8dbe0;background:#fff;border-radius:6px;padding:6px 10px;font-size:13px}button:hover{background:#f0f2f5}button.primary{background:#4f8cff;color:#fff;border-color:#4f8cff;font-weight:600}button.primary:hover{background:#3f78e0}button:disabled{opacity:.6;cursor:default}input,select,textarea{font-family:inherit;font-size:13px;border:1px solid #d8dbe0;border-radius:6px;padding:6px 8px;width:100%}.app{display:flex;flex-direction:column;height:100vh}.top-toolbar{display:flex;align-items:center;gap:12px;padding:10px 16px;background:#fff;border-bottom:1px solid #e2e4e8;flex-shrink:0}.brand{font-weight:700;font-size:15px;white-space:nowrap}.name-input{max-width:220px}.top-toolbar select{max-width:160px}.toolbar-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.toolbar-message{font-size:12px;color:#2e9e5b}.app-body{flex:1;display:flex;min-height:0}.sidebar{width:240px;flex-shrink:0;background:#fff;border-right:1px solid #e2e4e8;display:flex;flex-direction:column}.tabs{display:flex;border-bottom:1px solid #e2e4e8}.tabs button{flex:1;border:none;border-radius:0;background:transparent;padding:10px 4px;font-size:12px;border-bottom:2px solid transparent}.tabs button.active{border-bottom-color:#4f8cff;font-weight:600;color:#4f8cff}.tab-content{padding:12px;overflow-y:auto}.elements-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.elements-grid button{text-align:left}.bg-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.bg-swatch{height:40px;border-radius:6px;border:2px solid #d8dbe0;padding:0}.bg-swatch.active{border-color:#4f8cff;box-shadow:0 0 0 2px #4f8cff4d}.bg-custom{grid-column:span 3;display:flex;align-items:center;justify-content:space-between;font-size:12px;gap:8px}.bg-custom input{width:40px;padding:0;height:28px}.sticker-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}.sticker-btn{font-size:20px;padding:6px 0}.layers-list{list-style:none;margin:0;padding:0}.layers-list li{display:flex;align-items:center;justify-content:space-between;gap:4px;padding:6px 8px;border-radius:6px;font-size:12px;cursor:pointer}.layers-list li:hover{background:#f0f2f5}.layers-list li.active{background:#e8f0ff}.layer-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.layer-actions{display:flex;gap:2px;flex-shrink:0}.layer-actions button{padding:2px 6px;font-size:11px}.canvas-area{flex:1;overflow:auto;display:flex;align-items:flex-start;justify-content:center;padding:40px;background:#eceef1}.card-stage{position:relative;box-shadow:0 4px 24px #00000026;flex-shrink:0}.rnd-selected{outline:2px solid #4f8cff;outline-offset:1px}.empty-image{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:#f0f2f5;color:#999;font-size:12px;border:1px dashed #ccc}.properties-panel{width:280px;flex-shrink:0;background:#fff;border-left:1px solid #e2e4e8;padding:16px;overflow-y:auto}.properties-panel h3{margin-top:0;font-size:14px}.prop-row{margin-bottom:12px}.prop-row label{display:flex;flex-direction:column;gap:4px;font-size:12px;color:#555}.prop-row.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8px}.prop-row input[type=color]{padding:2px;height:30px}.prop-actions{margin-top:16px}.prop-actions button{width:100%;color:#d32f2f}.empty-hint{color:#999;font-size:13px;text-align:center;margin-top:20px}.error-text{color:#d32f2f;font-size:13px}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:100}.modal{background:#fff;border-radius:10px;width:420px;max-height:70vh;display:flex;flex-direction:column;padding:16px}.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}.modal-header h3{margin:0}.modal-header button{border:none;background:none;font-size:16px}.card-list{list-style:none;margin:0;padding:0;overflow-y:auto}.card-list li{display:flex;align-items:center;gap:8px;padding:10px 8px;border-bottom:1px solid #eee;cursor:pointer;font-size:13px}.card-list li:hover{background:#f7f8fa}.card-meta{margin-left:auto;color:#999;font-size:11px}